منوی شماره 4
کدهای منوی شماره 4 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.menu_4,.menu_4{
list-style:none outside none;
margin:0 0 0 0;
padding:0 0 0 0;
font-family:"B Koodak","B Yekan",Tahoma,Arial, Helvetica, sans-serif,Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}
.menu_4 ul{
filter:alpha(opacity=0);
opacity:0;
overflow:hidden;
z-index:-100px;
list-style:none outside none;
margin:0 0 0 0;
padding:0 0 0 0;
transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
}
.menu_4 li{
float:right;
display:block;
position:relative;
direction:rtl;
text-align:center;
border:thin #fff groove;
background:#444;
color:#fff;
padding:5px;
height:20px;
width:100px;
box-shadow:0px 0px 10px #fff inset;
}
.menu_4 li:hover{
background:#000;
box-shadow:0px 0px 20px #fff inset;
}
.menu_4 li:hover a{
color:#00B4FF
}
.menu_4 li:hover ul{
width:100px;
filter:alpha(opacity=100);
opacity:1;
}
.menu_4 li a{
color:#fff;
text-decoration:none;
}
.menu_4 ul li{
width:100%;
}
.menu_4 li a{
float:none;
font-family:"B Koodak","B Yekan",Tahoma,Arial, Helvetica, sans-serif,Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}
.menu_4 ul li:hover > a {
color: #fff;
font-family:"B Koodak","B Yekan",Tahoma,Arial, Helvetica, sans-serif,Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}
</style>
</head>
<body>
<ul class="menu_4">
<li><a href="#">منوی اول</a></li>
<li><a href="#">منوی دوم</a>
<ul>
<li><a href="#">زیرمنوی اول</a></li>
<li><a href="#">زیرمنوی دوم</a></li>
<li><a href="#">زیرمنوی سوم</a></li>
</ul>
</li>
<li><a href="#">منوی سوم</a>
<ul>
<li><a href="#">زیرمنوی اول</a></li>
<li><a href="#">زیرمنوی دوم</a></li>
<li><a href="#">زیرمنوی سوم</a></li>
</ul>
</li>
<li><a href="#">منوی چهارم</a>
<ul>
<li><a href="#">زیرمنوی اول</a></li>
<li><a href="#">زیرمنوی دوم</a></li>
<li><a href="#">زیرمنوی سوم</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.menu_4,.menu_4{
list-style:none outside none;
margin:0 0 0 0;
padding:0 0 0 0;
font-family:"B Koodak","B Yekan",Tahoma,Arial, Helvetica, sans-serif,Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}
.menu_4 ul{
filter:alpha(opacity=0);
opacity:0;
overflow:hidden;
z-index:-100px;
list-style:none outside none;
margin:0 0 0 0;
padding:0 0 0 0;
transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
}
.menu_4 li{
float:right;
display:block;
position:relative;
direction:rtl;
text-align:center;
border:thin #fff groove;
background:#444;
color:#fff;
padding:5px;
height:20px;
width:100px;
box-shadow:0px 0px 10px #fff inset;
}
.menu_4 li:hover{
background:#000;
box-shadow:0px 0px 20px #fff inset;
}
.menu_4 li:hover a{
color:#00B4FF
}
.menu_4 li:hover ul{
width:100px;
filter:alpha(opacity=100);
opacity:1;
}
.menu_4 li a{
color:#fff;
text-decoration:none;
}
.menu_4 ul li{
width:100%;
}
.menu_4 li a{
float:none;
font-family:"B Koodak","B Yekan",Tahoma,Arial, Helvetica, sans-serif,Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}
.menu_4 ul li:hover > a {
color: #fff;
font-family:"B Koodak","B Yekan",Tahoma,Arial, Helvetica, sans-serif,Cambria, Cochin, Georgia, Times, "Times New Roman", serif
}
</style>
</head>
<body>
<ul class="menu_4">
<li><a href="#">منوی اول</a></li>
<li><a href="#">منوی دوم</a>
<ul>
<li><a href="#">زیرمنوی اول</a></li>
<li><a href="#">زیرمنوی دوم</a></li>
<li><a href="#">زیرمنوی سوم</a></li>
</ul>
</li>
<li><a href="#">منوی سوم</a>
<ul>
<li><a href="#">زیرمنوی اول</a></li>
<li><a href="#">زیرمنوی دوم</a></li>
<li><a href="#">زیرمنوی سوم</a></li>
</ul>
</li>
<li><a href="#">منوی چهارم</a>
<ul>
<li><a href="#">زیرمنوی اول</a></li>
<li><a href="#">زیرمنوی دوم</a></li>
<li><a href="#">زیرمنوی سوم</a></li>
</ul>
</li>
</ul>
</body>
</html>
دسته بندی
کدهای آماده برای منو
نظرات 0 0 0