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

前端技术 2023/09/04 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/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\">phpstudy</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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9145

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)