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

رتبه این آیتم
رتبه 3 در 14 رای از 1 تا 5

ساخت منو 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

 


نویسنده این مقاله می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام و لینکدین. پروفایل شرکت در گوگل پلاس

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در گوگل پلاس به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

3 نظرات

  • لينک نظر سئوناب چهارشنبه, 26 خرداد 1395 11:07 پست شده توسط سئوناب

    عالی بود سپاس

  • لينک نظر آشا دوشنبه, 03 شهریور 1393 10:43 پست شده توسط آشا

    سلام من این خط از کد css رو متوجه نمیشم به چه معناست. li:hover>ul علامت --------------------------- به معنای ul می باشد که زیر مجموعه li است

  • لينک نظر روح الله جمعه, 16 اسفند 1392 12:21 پست شده توسط روح الله

    سلام هرکاری می کنم فایل css رو نمی تونم لینک کنم به index چه کنم ؟ -------------------------------------- با دارکوب تماس حاصل فرمایید

يک نظر بدهيد

موارد ستاره دار الزامی هستند

info [ at ] joomir.com
تهران، سعادت آباد، سرو غربی، کوچه آریا، پلاک 4، واحد 7
22083926 - 22085386 - 22082258
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد