【荐】自己做一款不错的JS+CSS多级导航菜单

代码简介：

自己做一款不错的二级导航菜单，黑色风格，是根据仿淘宝支付宝菜单而做的，自我感觉还算行吧。

代码内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>【荐】自己做一款不错的JS+CSS多级导航菜单_网页代码站(www.webdm.cn)</title>
<style>
/* ::::: css ::::: */
strong {font-style: normal;font-weight: normal;font-weight: bold;
}
a {cursor: pointer;text-decoration: none;
}
#container {width: 960px;margin: 0pt auto;
}
#nav, .nav-container, .nav-container ul, #nav .nav-master-a:hover, #nav .nav-master-a:hover strong, #nav li.current .nav-master-a strong, #nav li.current .nav-master-a, #nav .nav-sub a:hover, #nav .nav-sub a:hover span {background-image: url('http://www.webdm.cn/images/20101123/bg-nav.gif');background-repeat: no-repeat;
}
#nav {position: relative;height: 66px;margin: 5px 0pt 0pt;background-position: 0pt -230px;background-repeat: repeat-x;
}
.nav-container {padding-left: 15px;height: 66px;background-position: 0pt 0pt;
}
.nav-container ul {height: 100%;background-position: right -66px;
}
.nav-container ul ul.nav-sub {background: none repeat scroll 0% 0% transparent;height: auto;
}
.nav-master {display: block;float: left;height: 36px;width: 100px;line-height: 36px;text-align: center;padding-right: 4px;
}
.nav-master-a {display: block;font-size: 14px;height: 26px;line-height: 26px;overflow: hidden;background: none repeat scroll 0% 0% transparent;text-decoration: none;margin-top: 5px;
}
.nav-master-a strong {display: block;color: rgb(255, 255, 255);height: 100%;
}
li.current .nav-master-a strong, #nav li.current .nav-master-a:hover strong {color: rgb(0, 0, 0);
}
.nav-master-a:hover {text-decoration: none;background-position: 0pt -315px;
}
.nav-master-a:hover strong {background-position: right -360px;
}
#nav li.current .nav-master-a strong {background-position: right -180px;padding-top: 2px;
}
#nav li.current .nav-master-a {background-position: 0pt -131px;overflow: hidden;color: rgb(0, 0, 0);height: 31px;
}
#nav li.current .nav-master-a:hover strong {color: rgb(0, 0, 0);
}
ul.nav-sub {position: absolute;width: 920px;text-align: left;top: 38px;left: 20px;display: none;padding: 2px 0pt 0pt;background: none repeat scroll 0% 0% transparent;
}
#nav .current .nav-sub {display: block;
}
.nav-sub li {float: left;display: block;width: 78px;text-align: center;height: 30px;overflow: hidden;margin-right: 4px;
}
#nav .nav-sub a {display: block;height: 22px;overflow: hidden;color: rgb(77, 77, 77);text-decoration: none;
}
#nav .nav-sub a span {display: block;line-height: 22px;height: 22px;
}
#nav .nav-sub a:hover {background-position: 0pt -405px;
}
#nav .nav-sub a:hover span {background-position: right -446px;
}
.sp-nav {overflow:hidden;background: url(http://www.webdm.cn/images/20101123/bg-nav.gif) repeat-x 0 -595px;height:31px;line-height:31px
}
.sp-con {color:#CCC;margin:0 auto;width:968px;
}
.sp-l {overflow:hidden;float:left;background:url(http://www.webdm.cn/images/20101123/bg-nav.gif) no-repeat 0 -558px;width:6px;height:31px
}
.sp-r {overflow:hidden;float:right;background:url(http://www.webdm.cn/images/20101123/bg-nav.gif) no-repeat -6px -558px;height:31px;width:6px;
}
.sp-m {position:relative;padding:0 10px;float:left;background:url(http://www.webdm.cn/images/20101123/201010/bg-nav.gif) repeat-x 0 -495px;height:31px;line-height:31px;width:936px;color:#000;text-align: left;
}
.other {float: left;height: 23px;margin-right: 22px;display: inline;
}
.so {float: right;padding-top: 6px;height: 26px;
}
.so .inputstyleso {width: 89px;height: 16px;line-height: 16px;border: 1px solid rgb(190, 190, 190);float: left;padding-top: 2px;padding-left: 5px;
}
.so img {float: left;margin: 2px 4px 0pt 0pt;display: inline;
}
</style>
</head>
<body>
<script language="javascript">
var waitInterval2;
var MDelayTime2=300;/* 设置延时0.3秒 */
function qiehuan(num){
clearTimeout(waitInterval2);
waitInterval2=window.setTimeout("qiehuan2("+num+");",MDelayTime2);
}
function qiehuan2(num){clearTimeout(waitInterval2);for(var id = 0;id<=9;id++){if(id==num){document.getElementById("qh_con"+id).style.display="block";document.getElementById("mynav"+id).className="nav-master current";}else{document.getElementById("qh_con"+id).style.display="none";document.getElementById("mynav"+id).className="nav-master";}}
}
</script><div id="nav"><div class="nav-container"><ul><li class="nav-master current" id="mynav0"><a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(0)"><strong>首页</strong></a><ul class="nav-sub" id="qh_con0"><li><a href="#"><span>最近更新</span></a></li><li><a href="#"><span>热门推荐</span></a></li><li><a href="#"><span>周下载榜</span></a></li><li><a href="#"><span>月下载榜</span></a></li><li><a href="#"><span>相关教程</span></a></li><li><a href="#"><span>美化软件</span></a></li></ul></li><li class="nav-master" id="mynav1"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(1)"><strong>xp主题</strong></a><ul class="nav-sub" id="qh_con1"><li><a href="#"><span>美女明星</span></a></li><li><a href="#"><span>影视动漫</span></a></li><li><a href="#"><span>清爽系列</span></a></li><li><a href="#"><span>颜色专题</span></a></li><li><a href="#"><span>3D金属</span></a></li><li><a href="#"><span>节日游戏</span></a></li><li><a href="#"><span>汽车体育</span></a></li><li><a href="#"><span>风景设计</span></a></li><li><a href="#"><span>苹果系统</span></a></li><li><a href="#"><span>透明专题</span></a></li></ul></li><li class="nav-master" id="mynav2"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(2)"><strong>vista主题</strong></a><ul class="nav-sub" id="qh_con2"><li><a href="#"><span>完美套装</span></a></li><li><a href="#"><span>动漫影视</span></a></li><li><a href="#"><span>清爽系列</span></a></li><li><a href="#"><span>美女主题</span></a></li><li><a href="#"><span>3D系列</span></a></li><li><a href="#"><span>汽车主题</span></a></li><li><a href="#"><span>风景主题</span></a></li><li><a href="#"><span>黑色主题</span></a></li><li><a href="#"><span>创意设计</span></a></li><li><a href="#"><span>系统主题</span></a></li></ul></li><li class="nav-master" id="mynav3"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(3)"><strong>win7主题</strong></a><ul class="nav-sub" id="qh_con3"><li><a href="#"><span>完美套装</span></a></li><li><a href="#"><span>风景主题</span></a></li><li><a href="#"><span>动漫影视</span></a></li><li><a href="#"><span>汽车主题</span></a></li><li><a href="#"><span>清爽系列</span></a></li><li><a href="#"><span>设计主题</span></a></li><li><a href="#"><span>黑色主题</span></a></li><li><a href="#"><span>精美推荐</span></a></li></ul></li><li class="nav-master" id="mynav4"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(4)"><strong>屏幕保护</strong></a><ul class="nav-sub" id="qh_con4"><li><a href="#"><span>泡泡</span></a></li><li><a href="#"><span>湖泊瀑布</span></a></li><li><a href="#"><span>动物植物</span></a></li><li><a href="#"><span>3D、游戏</span></a></li><li><a href="#"><span>影视卡通</span></a></li><li><a href="#"><span>时钟</span></a></li><li><a href="#"><span>恐怖</span></a></li><li><a href="#"><span>节日、艺术</span></a></li><li><a href="#"><span>水馆族</span></a></li><li><a href="#"><span>自然风光</span></a></li><li><a href="#"><span>太空、火焰</span></a></li></ul></li><li class="nav-master" id="mynav5"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(5)"><strong>系统图标</strong></a><ul class="nav-sub" id="qh_con5"><li><a href="#"><span>IP包</span></a></li><li><a href="#"><span>苹果</span></a></li><li><a href="#"><span>系统硬件</span></a></li><li><a href="#"><span>生活</span></a></li><li><a href="#"><span>游戏</span></a></li><li><a href="#"><span>节日</span></a></li><li><a href="#"><span>卡通</span></a></li><li><a href="#"><span>文件夹</span></a></li><li><a href="#"><span>回收站</span></a></li><li><a href="#"><span>软件</span></a></li><li><a href="#"><span>手机数码</span></a></li></ul></li><li class="nav-master" id="mynav6"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(6)"><strong>鼠标指针</strong></a><ul class="nav-sub" id="qh_con6"><li><a href="#"><span>动漫鼠标</span></a></li><li><a href="#"><span>透明系列</span></a></li><li><a href="#"><span>精美特色</span></a></li><li><a href="#"><span>CursorFx/Xp</span></a></li><li><a href="#"><span>鼠标特效</span></a></li></ul></li><li class="nav-master" id="mynav7"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(7)"><strong>桌面壁纸</strong></a><ul class="nav-sub" id="qh_con7"><li><a href="#"><span>3D、创意</span></a></li><li><a href="#"><span>美女明星</span></a></li><li><a href="#"><span>动物植物</span></a></li><li><a href="#"><span>风景、日历</span></a></li><li><a href="#"><span>节日系列</span></a></li><li><a href="#"><span>影视动漫</span></a></li><li><a href="#"><span>游戏卡通</span></a></li><li><a href="#"><span>PSP、手绘</span></a></li><li><a href="#"><span>炫彩抽象</span></a></li><li><a href="#"><span>人文建筑</span></a></li></ul></li><li class="nav-master" id="mynav8"> <a class="nav-master-a" href="#" onMouseOut="clearTimeout(waitInterval2);" onMouseOver="javascript:qiehuan(8)"><strong>其它美化</strong></a><ul class="nav-sub" id="qh_con8"><li><a href="#"><span>启动界面</span></a></li><li><a href="#"><span>登陆界面</span></a></li><li><a href="#"><span>vista边栏</span></a></li><li><a href="#"><span>梦幻桌面</span></a></li><li><a href="#"><span>系统声音</span></a></li><li><a href="#"><span>精选美化包</span></a></li><li><a href="#"><span>相关教程</span></a></li><li><a href="#"><span>美化软件</span></a></li></ul></li></ul></div></div>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>
</body>
</html>代码来自：http://www.webdm.cn/webcode/ddb00e5a-96fb-4206-a1fd-7680934311d6.html

转载于:https://www.cnblogs.com/webdm/archive/2011/07/07/2099759.html

【荐】自己做一款不错的JS+CSS多级导航菜单相关推荐

【荐】CSS多级导航菜单
代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
很不错的JS+CSS滑动门_网页代码站(www.webdm.cn)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
很不错的JS+CSS滑动门
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
js导航css,js+css实现导航效果实例
本文实例讲述了js+css实现导航效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 程序代码如下: CSS+JS实现兼容性很好的无限级下拉菜单 *{ margin:0; padding:0; ...
js实现当前导航菜单高亮显示
2019独角兽企业重金招聘Python工程师标准>>> 为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有 ...
一个不错的js制作的右键菜单
网上转的,比我自己写的方便拓展,所以转过来~<html> <head> <script language='javascript'> /*******以下内容可以修 ...
一款不错的千神阁导航网模板V1.5
简介: 版本更新: V1.5版 1.优化博客样式的标题颜色,加深颜色更加突出标题和文章直接的层次感. 2.给每个模块添加阴影,更加有立体感. V1.4.2版: 1.优化首页更多箭头变成加号.优化首页文 ...

【荐】自己做一款不错的JS+CSS多级导航菜单

【荐】自己做一款不错的JS+CSS多级导航菜单相关推荐

最新文章

热门文章