روش های مختلفی برای ایجاد منوی دراپ داون و یا آبشاری در طراحی وب وجود دارد که در این مقاله یکی از ساده ترین روش ها را آموزش خواهم داد.
ساخت منو 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;}
تصویر منو به شکل زیر میباشد :
