گروه وب طراحان جوان

طراحی حرفه ای سایت جزئی از تخصص ماست

خوش آمدید مهمان 

نمایش یا پنهان کردن سربرگ

کاربر مهمان خوش امدید برای ارسال مطلب در این تالار گفتمان باید ثبت نام کنید





صفحات: [1]
نوسینده عنوان ها :ساخت منو Dorp Down افقی به وسیله Css
maryamsite-
dar
کاربر جدید
پست ها: 10
Permalink
پست ساخت منو Dorp Down افقی به وسیله Css
در April 12, 2014, 11:36
نقل قول

ساخت منو Dorp Down افقی توسط Css
ساخت منو Dorp Down افقی توسط Css

اول یک فایل به اسم index.php میسازیم و بعد یک فولدر به اسم css میسازیم و داخل فولدر css فایل style.css را میسازیم .

برای ساختن منوهای drop down توسط css اول در فایل index.php در قسمت <body> <body/> کدهای زیر را قرار دهید :

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Sub Item1</li>
<li>Sub Item1</li>
<li>Sub Item1</li>
</ul>
</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

و بعد برای لینک شدن صفحه index.php به صفحه style.css از کد زیر استفاده میکنیم و آنرا قبل از <head/> میگذاریم :

<link href="css/style.css" rel="stylesheet" type="text/css" />

و بعد کدهای زیر را در صفحه style.css میگذاریم نماییم :

@charset "utf-8";
body,ul,li {
margin: 0px;
padding: 0px;
background-color:#0CF;
}
li {
font-family: verdana;
font-size: 12px;
color: #333;
line-height: 40px;
list-style-type: none;
/* [disabled]list-style-image: url(../images/li.png); */
background-color: #990;
width: 100px;
float: left;
text-align: center;
height: 40px;
margin-left: 2px;
display: block;
}
li ul {
display: none;
}

body ul li ul li {
background-color: #F90;
margin: 0px;
padding: 0px;
}
 
li:hover{
background-color:#CC0;
cursor:pointer;}
li:hover>ul{
display:block;}

تصویر منو به شکل زیر میباشد :

منو آبشاری css

سورس منبع:
ساخت و طراحی منو Dorp Down افقی به وسیله Css

http://goo.gl/GxM6FP

صفحات: [1]
Mingle Forum by cartpauj
نسخه: 1.0.34 ; زمان بارگزاری صفحه : 0.006 ثانیه.
آمار سایت
  • کاربران آنلاین : 0
  • بازدید امروز: 17
  • بازدید دیروز: 1432
  • کل بازدید ها: 2365221
  • تعداد مطالب سایت 48
  • تعداد نظرات کاربران 53
  • تعداد کاربران سایت 59
  • آخرین آپدیت سایت ۰۶/۰۵/۱۳۹۳
  • تعداد نمونه کار ها : 32
نمودار پيشرفت پروژه‌ها‌
  • بهینه سازی سایت انجمن علمی
  • هماهنگ سازی سایت انجمن با وب طراحان
  • طراحی قالب جدید WebTJ.Ir
  • طراحی پروفایل کاربران
  • طراحی قسمت پرسش و پاسخ
  • طراحی تالار های گفتگو
  • طراحی سایت گروه