網(wǎng)頁(yè)特效代碼模板無(wú)憂>網(wǎng)頁(yè)特效>菜單導(dǎo)航特效代碼>

CSS+JS三級(jí)滑動(dòng)菜單_菜單導(dǎo)航特效

三級(jí)滑出菜單，基于CSS+JS，默認(rèn)是灰色，它可以支持三級(jí)分類，鼠標(biāo)放上自動(dòng)展開菜單子分類。豎向排列，適合的場(chǎng)合也很多，有愛(ài)好的朋友可以試著美化一下，把菜單加一個(gè)背景，或者變變顏色還是不錯(cuò)的。

<html>
<head>
<title>三級(jí)菜單</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">網(wǎng)站首頁(yè)</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">企業(yè)建站</a></li><li><a href="/sort/list_1_13_1.shtml">論壇社區(qū)</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系統(tǒng)</a></li><li><a href="/sort/list_1_20_1.shtml">學(xué)校政府</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相關(guān)</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">最新服務(wù)</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">統(tǒng)計(jì)調(diào)查</a></li><li><a href="/sort/list_1_197_1.shtml">廣告網(wǎng)賺</a></li><li>
</ul>
<li><a href="/other/top100.shtml">下載排行</a></li>
<li><a href="/service/ad.shtml">廣告服務(wù)</a></li>
</ul>
</li>
<li><a href="/">菜單示例</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

CSS+JS三級(jí)滑動(dòng)菜單_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些