首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 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
观后感(479) 申请书(21) 导游词(322) 慰问信(53) 文书(291) 计划(88) 闭幕词(9) 开幕词(63) 通知(159) 实用文书(952)
You might like
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python类参数self使用示例
2014/02/17 Python
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
北美三大旅游网站之一：Travelocity加拿大
2016/08/20 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
计算机专业职业生涯规划范文
2014/01/19 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
国际贸易专业求职信
2014/06/04 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
详解mysql三值逻辑与NULL
2021/05/19 MySQL
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers
Vue操作Storage本地化存储
2022/04/29 Vue.js