jquery实现的横向二级导航效果代码

本文实例讲述了jquery实现的横向二级导航效果代码。分享给大家供大家参考。具体如下：
这是一款灰色和黑色共同搭配做出的水平横向网站菜单，网页横向菜单代码，包括二级子菜单，使用了几张图片，用的朋友自己顺路径另存为吧。本菜单兼容性不错，而且设计清新、漂亮、简约，鼠标移动到主菜单上，即可下滑出二级子菜单项。
先来看看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-black-bg-nav-menu-style-codes/
具体代码如下：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>灰绿色搭配的横向二级导航</title><style>body {margin: 0;padding: 0;background: url（images/bg_texture.png）;font-family:5B8B4F53,Arial Narrow,arial,serif; color:#fff;}a {color: #fff;text-decoration: none;cursor: pointer;cursor: hand;}a:hover{text-decoration: underline;}ul {margin:0;padding:0;list-style:none;}#header {float: left;display: inline;width: 100%;min-width: 980px;padding: 0;margin:0;height:119px;overflow: visible;}#dd-navigation {background: url（"images/nav-bg.png"） repeat-x;clear:both; border-top:1px solid #1b1b1b;border-bottom:1px solid #1b1b1b;height: 48px;}#nav-strip ul li.nav-item,#nav-strip ul li.nav-item.active ,#nav-strip ul li.nav-item:hover{border-left: 1px solid #373737;border-right: 1px solid #181818;}#nav-strip {clear: both; margin: 0 auto;width: 936px;height: 48px;line-height: 28px;position:relative;z-index: 16777265;border-right: solid 1px #373737;border-left: solid 1px #181818;background: url（"images/nav-li.png"） repeat-x;}#nav-strip a:hover {text-decoration:none;}#nav-strip ul li.nav-item { display: inline;float: left;position:relative;width:115px;height: 48px;text-align:center;}#nav-strip ul li.nav-item:hover, #nav-strip ul li.nav-item.hover{background: url（"images/nav-hover.png"） repeat-x;}#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a{color: #6ebb1f;}#nav-strip ul li a{ font-weight: bold;color: #FFFFFF;display:block;padding:10px;font-size: 14px;outline:none;}#nav-strip ul li a .primary-link, #nav-strip ul li.active a .primary-link, #nav-strip ul li.hover a .primary-link{background: url（"images/sprite-nav.gif"） 100% -10px no-repeat transparent;padding-right: 10px;}#nav-strip ul li.no-subnav a .primary-link{ background: none;padding-right: 0;}#nav-strip ul li .subnav {display: none;position:absolute;top:49px;left: -1px;background:#282828;border-top:1px solid #313131;border-left: 1px solid #333;border-right: 1px solid #333;border-bottom: 1px solid #333;z-index: 16777263;*min-width: 150px;-webkit-box-shadow:0 0px 2px #000;-moz-box-shadow:0 0px 2px #000;box-shadow:0 0px 2px #000;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-bottom-left-radius:2px;-moz-border-bottom-right-radius:2px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;}#nav-strip .subnav-inner {float: left;width: 160px;}#nav-strip ul li .subnav ul{margin-bottom: 3px;float: left;width: 160px;margin:0;}#nav-strip ul li .subnav ul li{display:block;border-bottom:1px solid #333;float:left;height: auto;margin: 0;width: 160px;}#nav-strip ul li .subnav ul li a{font-weight: normal;}#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a{font-size: 12px;color: #fff;white-space: nowrap;*white-space: normal; _white-space: nowrap;padding: 5px 24px; text-align:left;height:24px;}#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a {white-space: normal;}#nav-strip ul li .subnav ul li.active a,#nav-strip ul li .subnav ul li a:hover {background: #0a0a0a url（"images/arrow.gif"） 6px 16px no-repeat; color:#6ebb1f！important; }</style><script src="jquery-1.6.2.min.js" type="text/javascript"></script></head><body><div id="header"></div> <div id="dd-navigation"><div id="nav-strip"><ul><li class="nav-item no-subnav active" id="nav-item_1"><a href="#" ><span class="primary-link">首页</span></a></li><li class="nav-item" id="nav-item_2"><a href="#" ><span class="primary-link">关于我们</span></a> <div class="subnav " id="subnav_2"><div class="subnav-inner"> <ul> <li class=""><a href="#" target="_top">电子商务人才</a></li><li class=""><a href="#" target="_top">苏州网站建设</a></li><li class=""><a href="#" target="_top">苏州网站推广</a></li><li class=""><a href="#" target="_top">导航条代码</a></li><li class=""><a href="#" target="_top">网络营销外包</a></li><li class=""><a href="#" target="_top">苏州网站制作</a></li> </ul></div></div></li><li class="nav-item" id="nav-item_3"><a href="#" ><span class="primary-link">产品展示</span></a> <div class="subnav " id="subnav_3"><div class="subnav-inner"> <ul> <li class=""><a href="#" target="_top">电子商务人才</a></li><li class=""><a href="#" target="_top">网站建设</a></li><li class=""><a href="#" target="_top">网站推广</a></li><li class=""><a href="#" target="_top">导航条代码</a></li><li class=""><a href="#" target="_top">网络营销外包</a></li><li class=""><a href="#" target="_top">网站制作</a></li></ul></div></div></li><li class="nav-item" id="nav-item_4"><a href="#" ><span class="primary-link">行业资讯</span></a> <div class="subnav " id="subnav_4"><div class="subnav-inner"> <ul> <li class=""><a href="#" target="_top">网站制作</a></li><li class=" "><a href="#" target="_top">电子商务人才</a></li></ul></div></div></li><li class="nav-item" id="nav-item_5"><a href="#" ><span class="primary-link">工程案例</span></a> <div class="subnav " id="subnav_5"><div class="subnav-inner"> <ul> <li class=""><a href="#" target="_top">网站建设</a></li><li class=""><a href="#" target="_top">网站推广</a></li><li class=""><a href="#" target="_top">导航条代码</a></li><li class=""><a href="#" target="_top">网络营销外包</a></li><li class=""><a href="#" target="_top">网站制作</a></li> </ul></div></div></li><li class="nav-item no-subnav" id="nav-item_6"><a href="#" ><span class="primary-link">源码空间</span></a></li><li class="nav-item" id="nav-item_7"><a href="#" ><span class="primary-link">联系我们</span></a> <div class="subnav" id="subnav_7"><div class="subnav-inner"> <ul> <li class=""><a href="#" target="_top">导航条代码</a></li><li class=""><a href="#" target="_top">网络营销外包</a></li><li class=""><a href="#" target="_top">苏州网站制作</a></li> </ul></div></div></li><li class="nav-item no-subnav end" id="nav-item_8"><a href="#" ><span class="primary-link">客服中心</span></a></li></ul></div> </div></div><script type="text/javascript">if （typeof（Reuters） == "undefined" || Reuters == null） { Reuters = new Object（）;}if （typeof（Reuters.nav） == "undefined" || Reuters.nav == null） { Reuters.nav = new Object（）;}if （typeof（Reuters.info） == "undefined" || Reuters.info == null） { Reuters.info = new Object（）;}if （typeof Reuters.info.edition == "undefined"） { Reuters.info.edition = "BETAUS";}if （typeof（Reuters.nav.baseUrlPrefix） == "undefined"） { Reuters.nav.baseUrlPrefix = "";}if （typeof（Reuters.nav.PRIMARY_SITE_URL） == "undefined"） { Reuters.nav.PRIMARY_SITE_URL = "http://www.reuters.com";}if（Reuters.info.edition == "BETAUS" || Reuters.info.edition == "US"） { Reuters.nav.PRIMARY_SITE_URL = "http://www.reuters.com";} else { Reuters.nav.PRIMARY_SITE_URL = "http://"+（Reuters.info.edition）.toLowerCase（）+".reuters.com";} $（"li.nav-item"）.hover（ function （） { $（this）.addClass（"hover"）; $（this）.children（".subnav"）.stop（true,true）.delay（50）.slideDown（50, function（）{if（$.fn.bgiframe && （$（"select"）.length > 0））{ $（this）.bgiframe（{opacity: false}）;} }）; },function（）{ $（this）.removeClass（"hover"）; $（this）.children（".subnav"）.stop（true,true）.delay（50）.slideUp（50）; }）; $（"#nav-strip a"）.click（function（） {var theParent = $（this）.closest（".nav-item"）;var theParentText= $（"a .primary-link", theParent）.text（）;var linkText = $（this）.text（）;linkText = （linkText == theParentText）? linkText : theParentText + " - " + linkText;var destLink = $（this）.attr（"href"）;if （typeof（dcsMultiTrack） == "function"） { dcsMultiTrack（"DCSext.DartZone","","DCSext.ModID","","DCSext.ModImp","0","DCSext.VirtualEvent", "1","DCSext.rNavChannel",theParentText,"DCSext.NavSection",linkText,"DCSext.NavURL",destLink,"WT.z_navtest", "1"）;} }）; $（"#masthead a"）.click（function（） {var destLink = $（this）.attr（"href"）;if （typeof（dcsMultiTrack） == "function"） { DcsMultiTrack（"DCSext.DartZone","","DCSext.ModID","","DCSext.ModImp","0","DCSext.VirtualEvent","1","DCSext.rNavChannel","Other","DCSext.NavURL",destLink,"WT.z_navtest","1"）;} }）; $（"#editionSwitchTop li"）.hover（function（） {$（this）.find（"ul"）.stop（true,true）; },function （） {$（this）.find（"ul"）.stop（true, true）.delay（500）.slideUp（50）; }）; $（"#editionSwitchTop li"）.click（function（event） {if（$（this）.find（"ul"）.css（"display"） == "none"）{$（this） .find（"ul"） .stop（true, true） .slideDown（75）;} else if（$（this）.find（"ul"）.css（"display"） == "block"）{ $（this） .find（"ul"） .stop（true, true） .slideUp（50）;} }）;$（document）.ready（function（） { $（"#editionSwitchFooter li"）.hover（function（） {$（this）.find（"ul"）.stop（true,true）; },function （） {$（this）.find（"ul"）.stop（true, true）.delay（500）.slideUp（50）; }）; $（function（） {$（"#editionSwitchFooter li"）.click（function（event） { if（$（this）.find（"ul"）.css（"display"） == "none"）{ $（this）.find（"ul"）.stop（true, true）.slideDown（75）; } else if（$（this）.find（"ul"）.css（"display"） == "block"）{$（this）.find（"ul"）.stop（true, true）.slideUp（50）; }}）; }）;}）;if（$（"#searchForm"）.attr（"action"） == "/search"） { $（"#searchForm"）.attr（"action", Reuters.nav.PRIMARY_SITE_URL +"/search"）;}$（"#nav-strip a"）.each（function（ind） { if （this.href.search（/.reuters.com/i） == -1） {this.target = "_blank"; }}）;</script></body></html>
希望本文所述对大家的jquery程序设计有所帮助。