首页
所有分类
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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Node.js API详解之 dns模块用法实例分析
May 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
transaction(1) 百度地图(1) 主从复制(1) 表约束(2) variables(1) Master(1) PyAutoGUI(1) Slave(1) 封装(1) ESXI(1)
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php实现的CSS更新类实例
2014/09/22 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
javascript下function声明一些小结
2007/12/28 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
jQuery焦点图轮播特效代码分享（3款）
2015/09/05 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python实现猜拳游戏
2020/03/04 Python
python 爬取小说并下载的示例
2020/12/07 Python
卡西欧G-SHOCK英国官网： 防水防震手表
2018/01/08 全球购物
AJax面试题
2014/11/25 面试题
党员培训思想汇报
2014/01/07 职场文书
中国央视网签名寄语
2014/01/18 职场文书
护理专业自我鉴定
2014/01/30 职场文书
捐款倡议书范文
2014/02/02 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
图书馆义工感想
2015/08/07 职场文书
2019年大学生学年自我鉴定！
2019/03/25 职场文书
三好学生竞选稿范文
2019/08/21 职场文书