CSS+JS三級滑動菜單_菜單導航特效

三級滑出菜單，基于CSS+JS，默認是灰色，它可以支持三級分類，鼠標放上自動展開菜單子分類。豎向排列，適合的場合也很多，有愛好的朋友可以試著美化一下，把菜單加一個背景，或者變變顏色還是不錯的。

<html>
<head>
<title>三級菜單</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-left: 0px;
	margin-top: 30px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #053553;
}
#menu {
background-color: #FEF0E5;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#FEF0E5', gradientType='0');
}
#nav, #nav ul {
float:left; 
clear:right; 
list-style:none;
padding:0px;
margin:0px;

}
#nav ul ul{
border-top:0px;
border-right:0px;
}
#nav a {
width:120px;
display:block;
color:#333;
text-decoration:none;
text-align:left;
padding: 3px 4px 3px 7px;
}
#nav a:hover{
color:#000;
margin: 0px;
padding: 2px 5px 2px 6px;
background-color: #f1f1f1;
text-decoration: none;
}
#nav a.selected{background:url() no-repeat right 50%;}
#nav li {
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul li{
float:none;
clear:right;
height:22px;
width:120px;
}
#nav li ul {
position:absolute;
margin:-21px 0px 0px 119px;
padding:0;
left:-9999em;
width:120px;
font-weight:normal;
display:block;
border:1px solid #CCCCCC;
background:#fff;
}

#nav li ul a {
width:120px; 
text-align:left;
margin: 0px;
}
#nav li ul ul {
margin:-21px 0px 0px 119px;
border:1px solid #CCC;
} 
#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}
#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left:auto;
height:22px;
}
#nav li:hover, #nav li.sfhover {
background:#f1f1f1;
border:1px solid #CCC;
height:22px;
} 
/* 懸浮樣式 */
-->
</style>
<script type="text/javascript">
img1=new Image();
img1.src="/Upload/eweb/12.gif";
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
window.onload=sfHover;
</script>
</head>
<body>
<table width="120" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td valign="top" id="menu">
<ul id="nav">
<li><a href="/" target="_blank">網站首頁</a></li>
<li><a href="/" target="_blank" class="selected">源碼下載</a>
<ul>
<li><a href="/" class="selected">ASP源碼</a>
<ul>
<li><a href="/sort/list_1_11_1.shtml">聊天留言</a></li><li><a href="/sort/list_1_12_1.shtml">企業建站</a></li><li><a href="/sort/list_1_13_1.shtml">論壇社區</a></li><li><a href="/sort/list_1_14_1.shtml">新聞文章</a></li>
</ul>
</li>
<li ><a href="#" class="selected">PHP源碼</a>
<ul>
<li><a href="/sort/list_1_145_1.shtml">博客日記</a></li><li><a href="/sort/list_1_29_1.shtml">CMS系統</a></li><li><a href="/sort/list_1_20_1.shtml">學校政府</a></li><li><a href="/sort/list_1_28_1.shtml">影音視頻</a></li>
</ul>
</li>
<li ><a href="#" class="selected">JAVA源碼</a>
<ul>
<li><a href="/sort/list_1_87_1.shtml">Ajax相關</a></li><li><a href="/sort/list_1_33_1.shtml">綜合其它</a></li>
</ul> 
</li>
<li><a href="#">其它下載</a></li>
</ul>
</li>
<li><a href="/" target="_blank" class="selected">最新服務</a>
<ul>
<li><a href="#" class="selected">最新更新</a></li>
<ul>
<li><a href="/sort/list_1_25_1.shtml">辦公治理</a></li><li><a href="/sort/list_1_31_1.shtml">小偷采集</a></li><li><a href="/sort/list_1_26_1.shtml">整站程序</a></li><li><a href="/sort/list_1_16_1.shtml">統計調查</a></li><li><a href="/sort/list_1_197_1.shtml">廣告網賺</a></li><li>
</ul>
<li><a href="/other/top100.shtml">下載排行</a></li>
<li><a href="/service/ad.shtml">廣告服務</a></li>
</ul>
</li>
<li><a href="/">菜單示例</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

CSS+JS三級滑動菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些