search

Home  >  Article  >  Web Front-end  >  Horizontal secondary navigation effect code implemented by jquery_jquery

Horizontal secondary navigation effect code implemented by jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:42:411494browse

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

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

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-black-bg-nav-menu-style-codes/

具体代码如下：

<!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)&#63; 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程序设计有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js focus text scrolling effect code sharing_javascript skillsNext article：js focus text scrolling effect code sharing_javascript skills

Related articles

See more