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

jquery实现的横向二级导航效果代码

Posted in Javascript onAugust 26, 2015

本文实例讲述了jquery实现的横向二级导航效果代码。分享给大家供大家参考。具体如下：

这是一款灰色和黑色共同搭配做出的水平横向网站菜单，网页横向菜单代码，包括二级子菜单，使用了几张图片，用的朋友自己顺路径另存为吧。本菜单兼容性不错，而且设计清新、漂亮、简约，鼠标移动到主菜单上，即可下滑出二级子菜单项。

先来看看运行效果截图：

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: url(images/bg_texture.png);font-family:\5B8B\4F53,Arial Narrow,arial,serif; color:#fff;}
a {color: #fff;text-decoration: none;cursor: pointer;cursor: hand;}
a:hover{text-decoration: underline;}
ul {margin:0;padding:0;list-style:none;}
#header {float: left;display: inline;width: 100%;min-width: 980px;padding: 0;margin:0;height:119px;overflow: visible;}
#dd-navigation {background: url('images/nav-bg.png') repeat-x;clear:both; border-top:1px solid #1b1b1b;border-bottom:1px solid #1b1b1b;height: 48px;}
#nav-strip ul li.nav-item,#nav-strip ul li.nav-item.active ,#nav-strip ul li.nav-item:hover{border-left: 1px solid #373737;border-right: 1px solid #181818;}
#nav-strip {clear: both; margin: 0 auto;width: 936px;height: 48px;line-height: 28px;position:relative;z-index: 16777265;border-right: solid 1px #373737;border-left: solid 1px #181818;background: url('images/nav-li.png') repeat-x;}
#nav-strip a:hover {text-decoration:none;}
#nav-strip ul li.nav-item { display: inline;float: left;position:relative;width:115px;height: 48px;text-align:center;}
#nav-strip ul li.nav-item:hover, #nav-strip ul li.nav-item.hover{background: url('images/nav-hover.png') repeat-x;}
#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a{color: #6ebb1f;}
#nav-strip ul li a{ font-weight: bold;color: #FFFFFF;display:block;padding:10px;font-size: 14px;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:49px;left: -1px;background:#282828;border-top:1px solid #313131;border-left: 1px solid #333;border-right: 1px solid #333;border-bottom: 1px solid #333;z-index: 16777263;*min-width: 150px;-webkit-box-shadow:0 0px 2px #000;-moz-box-shadow:0 0px 2px #000;box-shadow:0 0px 2px #000;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-bottom-left-radius:2px;-moz-border-bottom-right-radius:2px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;}
#nav-strip .subnav-inner {float: left;width: 160px;}
#nav-strip ul li .subnav ul{margin-bottom: 3px;float: left;width: 160px;margin:0;}
#nav-strip ul li .subnav ul li{display:block;border-bottom:1px solid #333;float:left;height: auto;margin: 0;width: 160px;}
#nav-strip ul li .subnav ul 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: #fff;white-space: nowrap;*white-space: normal; _white-space: nowrap;padding: 5px 24px; 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 {background: #0a0a0a url('images/arrow.gif') 6px 16px no-repeat; color:#6ebb1f!important; }
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header"></div>
 <div id="dd-navigation">
  <div id="nav-strip">
  <ul>
  <li class="nav-item no-subnav active" 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>   
    <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>   
    <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>   
    <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>   
    <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" 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>   
    <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.reuters.com';
}
if(Reuters.info.edition == 'BETAUS' || Reuters.info.edition == 'US') {
 Reuters.nav.PRIMARY_SITE_URL = 'http://www.reuters.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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
IE的有条件注释判定IE版本详解（附实例代码）
Jan 04 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
JavaScript中的this基本问题实例小结
Mar 09 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
jQuery三级下拉列表导航菜单代码分享
Apr 15 #Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 #Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 #Javascript
javascript中alert()与console.log()的区别
Aug 26 #Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 #Javascript
基于jQuery实现的QQ表情插件
Aug 25 #Javascript
js中javascript:void(0) 真正含义
Nov 05 #Javascript
抖音(1) LOGO(1) MIME(1) 存储过程(3) redo log(1) instantclient(1) binlog(2) 写入策略(1) 优化(1) 增删改查(2)
You might like
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 模拟登陆的两种实现方法
2017/08/10 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
J2EE面试题大全
2016/08/06 面试题
团队精神口号
2014/06/06 职场文书
博士生导师推荐信
2014/07/08 职场文书
市级三好学生评语
2014/12/29 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
2015年国庆节寄语
2015/08/17 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技