Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Horizontal secondary navigation effect code implemented by jquery_jquery

WBOY
Release： 2016-05-16 15:42:41
Original
1493 people have browsed it

本文实例讲述了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>
Copy after login

希望本文所述对大家的jquery程序设计有所帮助。

Related labels：
jquery
source：php.cn
Previous article：js focus text scrolling effect code sharing_javascript skills Next article：JS implements smart drop-down navigation effect code_javascript skills
Statement of this Website
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
Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template