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


Posted in Javascript onAugust 24, 2015

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

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

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

运行效果截图如下:

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
jquery性能优化高级技巧
Aug 24 #Javascript
javascript实现支持移动设备画廊
Aug 24 #Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 #Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 #Javascript
You might like
php中文字符截取防乱码
2008/03/28 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
Python中的面向接口编程示例详解
2021/01/17 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
常见的软件开发流程有哪些
2015/11/14 面试题
求职推荐信
2013/10/28 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
赞美教师的句子
2019/09/02 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang