企鹅 通过本文主要向大家介绍了jquery,横向二级导航等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例讲述了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>
&