登录
当前位置： 首页 > 编程笔记 >

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

白越
2023-03-14
本文向大家介绍JS实现黑色大气的二级导航菜单效果，包括了JS实现黑色大气的二级导航菜单效果的使用技巧和注意事项，需要的朋友参考一下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/

具体代码如下：

<!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+CSS实现大气的黑色首页导航菜单效果代码

    本文向大家介绍JS+CSS实现大气的黑色首页导航菜单效果代码，包括了JS+CSS实现大气的黑色首页导航菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单，可用作首页导航菜单，从设计的角度来讲，挺专业，从实用角度来讲，应用广泛，是款人见人爱的经典

  • js实现的黑背景灰色二级导航菜单效果代码

    本文向大家介绍js实现的黑背景灰色二级导航菜单效果代码，包括了js实现的黑背景灰色二级导航菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款js实现的黑背景灰色二级导航菜单，兼容IE6、firefox的js+css横向二极导航菜单。挺简洁，不过很清新，二级菜单是水平显示在主菜单的下方，采用流行的微

  • js实现适用于素材网站的黑色多级菜单导航条效果

    本文向大家介绍js实现适用于素材网站的黑色多级菜单导航条效果，包括了js实现适用于素材网站的黑色多级菜单导航条效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下： 这是一款适用于素材网站的黑色多级菜单导航条，无需jQuery，采用CSS+javaScript来实现，整体效果非常棒，用来学习CSS也是很不错的。

  • jquery实现二级导航下拉菜单效果

    本文向大家介绍jquery实现二级导航下拉菜单效果，包括了jquery实现二级导航下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery+css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下 运行效果图： 具体代码： 第一步：确定导航的html格式 第二步：CSS实现导航效果     

  • jquery实现二级导航下拉菜单效果实例

    本文向大家介绍jquery实现二级导航下拉菜单效果实例，包括了jquery实现二级导航下拉菜单效果实例的使用技巧和注意事项，需要的朋友参考一下 大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){...})获取到想要

  • JS+CSS实现六级网站导航主菜单效果

    本文向大家介绍JS+CSS实现六级网站导航主菜单效果，包括了JS+CSS实现六级网站导航主菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现六级网站导航主菜单效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现支持6级的网站导航主菜单，级级相信够大家用了，外观蓝色风格，也是使用最多的一种菜单颜色，而且菜单的兼容性非常好，支持IE6\IE7\IE8，火狐、G

相关阅读

jquery实现二级导航下拉菜单效果实例JS+CSS实现六级网站导航主菜单效果JavaScript实现简单的二级导航菜单实例JS 实现导航菜单中的二级下拉菜单的几种方式js实现带圆角的两级导航菜单效果代码

相关文章

MyBatis 二级缓存 关联刷新实现Cider前端一面50min大二菜鸟Vim导航ionic 导航Bootstrap4 导航

相关问答

更改WordPress中滚动的导航菜单背景色HTML导航菜单到wordpress更改导航抽屉中菜单项的文本颜色带有Jetpack导航的BottomNavigation菜单导致Android出现问题非画布导航：如何使一个二级菜单滑到第一级菜单的顶部而不覆盖正文文本？

相关工具

简单易用的Google地图导航黑白棋大师滚动菜单四格菜单旋转菜单

相关文档

Git 菜单精通脚本黑客常见 Web 特效实践强化学习导论中文第二版如何实现自己的 jQuery
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.