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


Posted in Javascript onSeptember 28, 2015

本文实例讲述了JS+CSS实现六级网站导航主菜单效果。分享给大家供大家参考。具体如下:

这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色,而且菜单的兼容性非常好,支持IE6\IE7\IE8,火狐、GG浏览器等不同内核的主流浏览器。

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS六级导航菜单</title>
<style>
.preload1 {background: url(images/blank_over.gif);}
.preload2 {background: url(images/blank_overa.gif);}
#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(images/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(images/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(images/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(images/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(images/blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(images/blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url(images/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(images/blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(images/blank_overa.gif) no-repeat right top;}
#nav li:hover {position:relative; z-index:200;}
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly{background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover {background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover{background:#3a93d2 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
</style>
<script type="text/javascript">
stuHover = function() {
 var cssRule;
 var newSelector;
 for (var i = 0; i < document.styleSheets.length; i++)
 for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
  {
  cssRule = document.styleSheets[i].rules[x];
  if (cssRule.selectorText.indexOf("LI:hover") != -1)
  {
   newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
  document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
  }
 }
 var getElm = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<getElm.length; i++) {
 getElm[i].onmouseover=function() {
  this.className+=" iehover";
 }
 getElm[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp(" iehover\\b"), "");
 }
 }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
</head>
<body>
<ul id="nav">
 <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
 <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
 <ul class="sub">
  <li><a href="#nogo3" class="fly">Cameras</a>
   <ul>
   <li><a href="#nogo4">Nikon</a></li>
   <li><a href="#nogo5">Minolta</a></li>
   <li><a href="#nogo6">Pentax</a></li>
   </ul>
  </li>
  <li class="mid"><a href="#nogo7" class="fly">Lenses</a>
   <ul>
   <li><a href="#nogo8">Wide Angle</a></li>
   <li><a href="#nogo9">Standard</a></li>
   <li><a href="#nogo10">Telephoto</a></li>
   <li><a href="#nogo11" class="fly">Zoom</a>
    <ul>
    <li><a href="#nogo12">35mm to 125mm</a></li>
    <li><a href="#nogo13">50mm to 250mm</a></li>
    <li><a href="#nogo14">125mm to 500mm</a></li>
    </ul>
   </li>
   <li><a href="#nogo15">Mirror</a></li>
   <li><a href="#nogo16" class="fly">Non standard</a>
    <ul>
    <li><a href="#nogo17">Bayonet mount</a></li>
    <li><a href="#nogo18">Screw mount</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a href="#nogo19">Flash Guns</a></li>
 </ul>
 </li>
 <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
 <ul class="sub">
  <li><a href="#nogo23">Printing</a></li>
  <li><a href="#nogo25">Retouching</a></li>
 </ul>
 </li>
 <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
 <ul class="sub">
  <li><a href="#nogo28">Support</a></li>
  <li><a href="#nogo29" class="fly">Sales</a>
  <ul>
   <li><a href="#nogo30">USA</a></li>
   <li><a href="#nogo31">Canadian</a></li>
   <li><a href="#nogo32">South American</a></li>
   <li><a href="#nogo33" class="fly">European</a>
   <ul>
    <li><a href="#nogo34" class="fly">British</a>
    <ul>
     <li><a href="#nogo35">London</a></li>
     <li><a href="#nogo36">Liverpool</a></li>
     <li><a href="#nogo37">Glasgow</a></li>
     <li><a href="#nogo38" class="fly">Bristol</a>
     <ul>
      <li><a href="#nogo39">Redland</a></li>
      <li><a href="#nogo40">Hanham</a></li>
      <li><a href="#nogo41">Eastville</a></li>
     </ul>
     </li>
     <li><a href="#nogo42">Cardiff</a></li>
     <li><a href="#nogo43">Belfast</a></li>
    </ul>
    </li>
    <li><a href="#nogo44">French</a></li>
    <li><a href="#nogo45">German</a></li>
    <li><a href="#nogo46">Spanish</a></li>
   </ul>
   </li>
   <li><a href="#nogo47">Australian</a></li>
   <li><a href="#nogo48">Asian</a></li>
  </ul>
  </li>
  <li><a href="#nogo49">Buying</a></li>
  <li><a href="#nogo50">Photographers</a></li>
  <li><a href="#nogo51">Stockist</a></li>
  <li><a href="#nogo52">General</a></li>
 </ul>
 </li>
 <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
 <ul class="sub">
  <li><a href="#nogo54">Online</a></li>
  <li><a href="#nogo55">Catalogue</a></li>
  <li><a href="#nogo56">Mail Order</a></li>
 </ul>
 </li>
 <li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</body>
</html>

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

Javascript 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 #Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 #Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 #Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 #Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php生成二维码
2015/08/10 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
python各种语言间时间的转化实现代码
2016/03/23 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python实现四人制扑克牌游戏
2020/04/22 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
初一生物教学反思
2014/01/18 职场文书
李开复演讲稿
2014/05/24 职场文书
社团活动总结怎么写
2014/06/30 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js