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订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些