首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现黑色大气的二级导航菜单效果

Posted in Javascript onSeptember 18, 2015

本文实例讲述了JS实现黑色大气的二级导航菜单效果。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

JS实现黑色大气的二级导航菜单效果

在线演示地址如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多级导航菜单</title>
<style>
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('images/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(images/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(images/bg-nav.gif) no-repeat 0 -558px;
 width:6px;
 height:31px
}
.sp-r {
 overflow:hidden;
 float:right;
 background:url(images/bg-nav.gif) no-repeat -6px -558px;
 height:31px;
 width:6px;
}
.sp-m {
 position:relative;
 padding:0 10px;
 float:left;
 background:url(images/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>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS实现黑色大气的二级导航菜单效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
javascript 缓冲运动框架的实现
Sep 29 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
11种ASP连接数据库的方法
Sep 18 #Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 #Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 #Javascript
JS实现很实用的对联广告代码（可自适应高度）
Sep 18 #Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 #Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 #Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 #Javascript
自动播放(1) 分区(2) 正则表达式(3) 乱码(3) greenlet(1) 静态压缩(1) 驱动模型(1) Excel(4) 信息校验(1) Coroutine(1)
You might like
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
利用Angular+Angular-Ui实现分页（代码加简单）
2017/03/10 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
详解常用查找数据结构及算法（Python实现）
2016/12/09 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python实现弹跳小球
2019/05/13 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python元组拆包实现方法
2021/02/28 Python
CSS3 渐变（Gradients）之CSS3 径向渐变
2016/07/08 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
加拿大在线隐形眼镜专家：PerfectLens.ca
2016/11/19 全球购物
C#面试常见问题
2013/02/25 面试题
学生出入校管理制度
2014/01/16 职场文书
总经理司机职责
2014/02/02 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
大学生工作自荐书
2014/06/16 职场文书
装修活动策划方案
2014/08/27 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
大学生就业意向书
2015/05/11 职场文书
党内外群众意见范文
2015/06/02 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS