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

رتبه این آیتم
ساخت منو Dorp Down افقی توسط Css
رتبه 3 در 16 رای از 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

 

03-تیر-1397

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

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

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

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

4 نظر

  • آنتی ویروس جمعه, 06 بهمن 1396 20:38 پست شده توسط آنتی ویروس

    خیلی عالی بود فیلم آموزشی . ممنون

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

    عالی بود سپاس

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

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

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

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

يک نظر بدهيد

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

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد