jQuery仿21CN官网二级导航菜单样式

jQuery仿21CN官网导航目录二级菜单样式,移到主导航上,会有块状的子导航出现。

用法:

1.引入jQuery相关类库和插件js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="nav.js"></script>

2.定义菜单层

<ul id="nav">
	<li class="nav-item">
		<a href="http://www.jqdemo.com/" class="nav-link">新闻</a>
		<div class="nav-dropdown">
			<div class="nav-dropdown-trending">
				<ul class="trending">
					<li><a href="http://www.jqdemo.com/">中方不接受日本所谓“抗议” 称琉球是学术问题</a></li> 
					<li><a href="http://www.jqdemo.com/">河南在2010年“赵作海案”后翻错案释放116人</a></li> 
					<li><a href="http://www.jqdemo.com/">全国留守流动儿童将近1亿 仍在逐年扩大</a></li> 
					<li><a href="http://www.jqdemo.com/">学者：环保问题难解决因地方政将经济放环保之前</a></li> 
					<li><a href="http://www.jqdemo.com/">高三男生恋爱16次均告吹 母亲严令找北京女生</a></li> 
				</ul>
				<p class="nav-dropdown-entry"><a href="http://www.jqdemo.com/">进入新闻频道&gt;&gt;</a></p>
			</div>
			<div class="nav-dropdown-channel">
				<ul class="channel">
					<li><a href="http://www.jqdemo.com/">国内</a></li>
					<li><a href="http://www.jqdemo.com/">国际</a></li>
					<li><a href="http://www.jqdemo.com/">社会</a></li>
					<li><a href="http://www.jqdemo.com/">军事</a></li>
					<li><a href="http://www.jqdemo.com/">历史</a></li>
					<li><a href="http://www.jqdemo.com/">评论</a></li>
				</ul>
			</div>
		</div>
	</li>
</ul>

3.定义css样式

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/*--header--*/
.headerbg{height:42px;margin-bottom:12px;background:#efefef url(images/topbar.gif) repeat-x 0 0;border-top:solid 1px #ddd;margin:40px 0 0 0;}
#header{height:42px;width:620px;margin:0 auto;}
#header .logo{float:left;display:block;margin-top:2px;width:36px;height:36px;overflow:hidden;}
#nav{float:right;font-size:16px;font-family:"微软雅黑","宋体";}
#nav a:hover{text-decoration:none}
#nav .nav-item,#nav .nav-link{position:relative;float:left;display:block;color:#444;z-index:1000;}
#nav .nav-link{height:40px;margin-left:-1px;line-height:40px;font-weight:700;border:1px solid #dadada;border-top-color:#efefef;border-bottom:none;z-index:999;width: 59px;text-align:center;}
#nav .hover .nav-link{white-space:nowrap;border-bottom:1px solid #fff;color:#ca0000;background:#fbfbfb}
#nav .nav-dropdown{display:none;position:absolute;top:41px;left:-1px;width:480px;height:290px;border:1px solid #dadada;border-bottom:5px solid #c2c2c2;background:#fff;box-shadow:0 1px 6px rgba(0, 0, 0, 0.2);z-index:998}
#nav .nav-dropdown-align-right{left:auto;right:0;_right:-1px}
#nav .nav-dropdown-trending{float:left;width:380px;font-size:16px}
#nav .nav-dropdown-channel{float:right;width:100px;height:290px;font-size:14px;background:#f6f6f6}
#nav .nav-dropdown a:hover{color:#ca0000}
#nav .trending li{height:50px;line-height:50px;font-weight: 700;border-bottom:1px dashed #ccc;vertical-align:bottom;overflow:hidden}
#nav .trending li a{display:block;padding-left:25px;color:#1E1E1E;}
#nav .trending li a:hover{background:#f6f6f6}
#nav .nav-dropdown-entry{line-height:34px;margin-left:25px;font-size: 14px;}
#nav .nav-dropdown-entry a{display:inline-block;color:#b20000}
#nav .channel{margin-top:16px}
#nav .channel li{line-height:2em}
#nav .channel li a{height:30px;padding-left:24px;line-height:30px;color:#6d6d6d}

4.使用插件提供的方法:

$(document).ready(function(){
	$('#nav .nav-item').dropdown({
		dropdownEl:'.nav-dropdown',
		openedClass:'hover'
	});
});

原文转自:jQuery仿21CN官网二级导航菜单样式