首页
所有分类
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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
ES6基础之默认参数值
Feb 21 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
JS实现分页导航效果
Feb 19 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
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) 迪杰斯特拉(1) 三角函数(1) pongo2(1) Carbon(1) nacos(1) Dijkstra(1) 动态代理(1) 优先队列(1) seata(1)
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Mootools 1.2教程 滑动效果（Slide）
2009/09/15 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
Python中几个比较常见的名词解释
2015/07/04 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python实现石头剪刀布游戏
2021/01/20 Python
英国精品买手店：Browns Fashion
2016/09/29 全球购物
美国豪华时尚女性精品店：Kirna Zabête
2018/01/11 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
党员创先争优承诺书
2014/03/26 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
家长学校教学计划
2015/01/19 职场文书
租车协议书
2015/01/27 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2019年工作总结范文
2019/05/21 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript