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

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程序设计有所帮助。

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

- Author -

企鹅

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

Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
迪杰斯特拉(1) MyBatis(5) cv2(1) exec(1) seata(1) 三角函数(1) nacos(1) 优先队列(1) Android Studio(4) Dijkstra(1)
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php解决约瑟夫环示例
2014/04/09 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP反射机制用法实例
2014/08/28 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
教你php如何实现验证码
2016/01/20 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
详解Python中DOM方法的动态性
2015/04/11 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
外贸公司实习自我鉴定
2013/09/24 职场文书
新学期教师寄语
2014/04/02 职场文书
迟到检讨书2000字（精选篇）
2014/10/07 职场文书
婚庆答谢词
2015/01/04 职场文书
三下乡个人总结
2015/03/04 职场文书
银行招聘自荐信
2015/03/06 职场文书
2019职场单身人才调研报告：互联网行业单身比例最高
2019/08/07 职场文书
创作书写之导游词实用技巧分享（干货）
2019/12/20 职场文书
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
python数据处理之Pandas类型转换
2022/04/28 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技