jquery实现适用于门户站的导航下拉菜单效果代码

2019-11-20 11:45:28

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款应用了jQuery+CSS共同编写实现的网页导航菜单，采用浅蓝色的布局方式，整体格调淡雅清新，简洁大方，不失为一款好菜单。本特点的特点是兼容好，在火狐/IE下都有良好表现，而且在有二级子菜单的地方，主菜单上都会有一个小三角标识，很好的提升了用户体验，相信你也会喜欢的。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/jquery-web-index-nav-menu-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: #FFF;font-family: arial,helvetica,sans;}a {color: #006E97;text-decoration: none;cursor: pointer;cursor: hand;}a:hover{text-decoration: underline;}ul {margin:0;padding:0;list-style:none;}/* Header头部部分 */#header {float: left;display: inline;width: 100%;min-width: 980px;background: #005774;padding: 0;margin: 0 0 10px 0;height: auto;overflow: visible;}#masthead {width: 100%;margin: 0 auto 0 auto;clear: both;overflow: visible;height:76px;z-index: 16777267;position:relative;}#masthead .mast-strip { margin: 0 auto 0 auto;clear: both;overflow: hidden;width: 940px;height:76px;margin-bottom:0;overflow:visible;position:relative;}#masthead #logo {float: left;width: 221px;height: 45px;padding-right: 15px;background:none;}#masthead #logo img {margin: 15px 0 0 0;}/* Nav主菜单部分 */#dd-navigation {background: url('images/nav-bg.png') repeat-x;clear:both; border-bottom:1px solid #556164;}#nav-strip ul li.nav-item,#nav-strip ul li.nav-item.active ,#nav-strip ul li.nav-item:hover{border-right: solid 1px #79dbe1; border-left: solid 1px #0d6b86;}#nav-strip {clear: both; margin: 0 auto;width: 936px;height: 42px;line-height: 22px;position:relative;z-index: 16777265;border-right: solid 1px #0d6b86;border-left: solid 1px #79dbe1;}#nav-strip a:hover {text-decoration:none;}#nav-strip ul li.nav-item { display: inline;float: left;position:relative;width:115px;height: 42px;text-align:center;}#nav-strip ul li.nav-item.active{background-color: #91dce1;background: url('images/nav-hover.png') repeat-x;}#nav-strip ul li.nav-item:hover, #nav-strip ul li.nav-item.hover{background: #3DA7C6;}#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a{color: #fff;}#nav-strip ul li.nav-item.active a{color: #000;}#nav-strip ul li a{font-weight: bold;color: #FFFFFF;display:block;padding:10px;font-size: 12px;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:43px;left: -1px;padding-bottom: 2px; background:#ceebf2;border:1px #ccc solid;z-index: 16777263;*min-width: 130px;}#nav-strip .subnav-inner {float: left;*min-width: 130px;}#nav-strip ul li .subnav ul{float: left;min-width: 130px;margin:0;}#nav-strip ul li .subnav ul li{display:block;border-left:none;border-right:none;float: none;height: auto;margin: 0 10px;padding: 0; }#nav-strip ul li .subnav ul.one{width: 130px;margin-bottom: 3px;}#nav-strip ul li .subnav ul.one li{margin:0;}#nav-strip ul li .subnav ul.one 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: #214181;white-space: nowrap;*white-space: normal;_white-space: nowrap;padding: 5px 20px; 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 {color: #214181 !important; text-decoration:underline;}</style><script src="jquery-1.6.2.min.js" type="text/javascript"></script></head><body><div id="header"> <div id="masthead">  <div class="mast-strip">  <div id="logo"><a id="logoLink" href="#"></a></div>   </div> </div> <div id="dd-navigation">  <div id="nav-strip">  <ul>  <li class="nav-item no-subnav" 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 class="one">       <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 class="one">       <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 class="one">       <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 class="one">       <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 active" 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 class="one">       <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.baidu.com';}if(Reuters.info.edition == 'BETAUS' || Reuters.info.edition == 'US') { Reuters.nav.PRIMARY_SITE_URL = 'http://www.baidu.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程序设计有所帮助。

上一篇：js实现类似MSN提示的页面效果代码分享

下一篇：jquery性能优化高级技巧