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

这篇文章主要介绍了js实现适用于素材网站的黑色多级菜单导航条效果,涉及javascript鼠标事件及页面元素样式的动态切换技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下：

这是一款适用于素材网站的黑色多级菜单导航条，无需jQuery，采用CSS+javaScript来实现，整体效果非常棒，用来学习CSS也是很不错的。

运行效果截图如下：

在线演示地址如下：

http://demo.html.cn/js/2015/js-black-color-nav-style-codes/

具体代码如下：

    body{margin:0;padding:0;color:#000;} #mainHeader{width:100%;z-index:3020;position:relative;} #mainHeader ul,#mainHeader li{position:relative;margin:0;padding:0;list-style:none;z-index:3020;} #headerTop{background:#222;background:linear-gradient(bottom,#171717 0,#222 10%);background:-moz-linear-gradient(bottom,#171717 0,#222 10%);background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#171717),color-stop(10%,#222));z-index:3020;height:52px;} #headerBottom{border-top:1px solid #4f4f4f;border-bottom:1px solid #000;position:relative;height:34px;background:#2c2c2c;background:linear-gradient(top,#3c3c3c 0,#1d1d1d 100%);background:-moz-linear-gradient(top,#3c3c3c 0,#1d1d1d 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(100%,#1d1d1d));z-index:3010;} #navmenu{width:900px;margin:0 auto;position:relative;font-size:14px;} #navmenu li{display:block;position:relative;float:left;border-top:0;border-left:1px solid #454545;border-bottom:0;border-right:1px solid #151515;xheight:18px;} #navmenu li a{text-shadow:1px 1px 1px black;display:block;padding:8px 18px;color:#fff;text-decoration:none;white-space:nowrap;} #navmenu li a:hover{padding-top:5px;border-top:3px solid #ff0000;} .newSash{position:relative;} .newSash .newSashSpan{background:url(images/newSashRed.gif) top left no-repeat;width:26px;height:26px;position:absolute;top:-1px;right:0;} .downArrow{display:block;border-color:#fff transparent transparent transparent;border-style:solid;border-width:3px;height:0;width:0;position:absolute;top:16px;right:8px;_border:none;} #navmenu div{position: absolute;visibility: hidden; padding: 0;margin-left:-1px;margin-top:2px; background: #313131;border:1px solid #222;} #navmenudiv a{position: relative;display: block;margin: 0;padding: 8px 10px;border-bottom:1px solid #fff;width: auto;white-space: nowrap;text-align: left;text-decoration: none;background: #666;color: #fff;} #navmenu div a:hover{background: #222;border-top:none;border-left:3px solid #ff0000;color: #FFF;padding: 8px 10px;}    
 
网站首页 本站电子商务网络营销人才导航条代码网站营销
导航条代码 本站电子商务网络营销人才导航条代码网站营销
网页素材 本站电子商务网络营销人才导航条代码网站营销
本站
开源源码 本站电子商务网络营销人才导航条代码网站营销
网站营销
网站建设




非常小巧的JS下拉菜单代码，兼容：IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+

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

以上就是js实现适用于素材网站的黑色多级菜单导航条效果的详细内容，更多请关注本站其它相关文章！