ساخت منو Dorp Down افقی توسط Css
کد Css جهت انیمیشن کردن باکس
2015-02-16انتخاب رنگ برای وب سایت
2015-02-16ساخت منو Dorp Down افقی توسط Css
ساخت منو 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;}
تصویر منو به شکل زیر میباشد :
ساخت منو Dorp Down افقی توسط Css
