您的位置：首页 > Web前端 > JQuery

分享一个大气简洁的黑色横向二级jquery导航，可适应各类网站

2013-04-18 22:06 429 查看
　　博主今天要分享的是一个珍藏N久的大气简洁的黑色横向二级jquery导航，稍作修改即可适应各类网站的风格。不多说，先点此看看效果吧。

效果预览：

黑色横向二级jquery导航菜单 - 东风化宇

华北高校

北京大学

清华大学

南开大学

中国人民大学

北京师范大学

天津大学

华东高校

浙江大学

上海交通大学

复旦大学

南京大学

山东大学

中国科学技术大学

华南高校

海南大学

广西大学

广西师范大学

广东外语外贸大学

华南理工大学

汕头大学

华中高校

中国地质大学

华中科技大学

华中农业大学

华中师范大学

武汉理工大学

武汉大学

东北高校

哈尔滨工业大学

吉林大学

大连理工大学

东北师范大学

东北大学

哈尔滨工程大学

西南高校

重庆大学

四川大学

电子科技大学

西南大学

西南交通大学

云南大学

西北高校

西安交通大学

兰州大学

西北工业大学

西安电子科技大学

西北农林科技大学

西北大学

贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>黑色横向二级jquery导航菜单 - 东风化宇</title>
<script src="jquery.min.js" type="text/javascript"></script><!-- 引入JQuery包 -->
</head>
<style type="text/css">
html *{
padding:0;
margin:0;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.nav *{
text-decoration:none;
font-size:9pt;

}
.nav * a:hover{
background-color:#82ce18;/* 鼠标经过时的背景，可自定义 */
}
.menu{
list-style:none;
height:40px;
width:100%;
background-color:#333;
}
.nav{
list-style:none;
height:40px;
width:900px;
margin:0 auto;
background-color:#333;
}
.nav li{
float:left;
border-left:1px solid #4a4a4a;
border-right:1px solid #242424;
border-top:1px solid #4a4a4a;
border-bottom:1px solid #242424;
position:relative;
}
.nav li a{
color:#fff;
height:38px;
line-height:38px;
font-weight:bold;
padding:0 20px;
blr:expression(this.onFocus=this.close());
blr:expression(this.onFocus=this.blur());
display:inline-block;
}
.nav li a:focus{
-moz-outline-style: none;
}
.nav li .sub-nav{
position:absolute;
top:39px;
left:-1px;
list-style:none;
background-color:#333;
display:none;
}
.nav li .sub-nav li{
text-align:center;
clear:left;
width:140px;
height:35px;
line-height:35px;
position:relative;
}
.nav li .sub-nav li a{
height:34px;
line-height:34px;
width:138px;
padding:0;
display:inline-block;
}
</style>

<script>
$(function(){
$(".nav>li").hover(function(){
$(this).children('ul').stop(true,true).show(300);
},function(){
$(this).children('ul').stop(true,true).hide(300);
})
})
</script>
<body>
<br><br><br><br><br><br><br><br><br>
<div id="content">
<!--DEMO start-->
<div class="menu">
<ul class="nav">
<li><a href="http://www.qcqxy.com/">华北高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">北京大学</a></li>
<li><a href="http://www.qcqxy.com/">清华大学</a></li>
<li><a href="http://www.qcqxy.com/">南开大学</a></li>
<li><a href="http://www.qcqxy.com/">中国人民大学</a></li>
<li><a href="http://www.qcqxy.com/">北京师范大学</a></li>
<li><a href="http://www.qcqxy.com/">天津大学</a></li>
</ul>
</li>
<li><a href="http://www.qcqxy.com/">华东高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">浙江大学</a></li>
<li><a href="http://www.qcqxy.com/">上海交通大学</a></li>
<li><a href="http://www.qcqxy.com/">复旦大学</a></li>
<li><a href="http://www.qcqxy.com/">南京大学</a></li>
<li><a href="http://www.qcqxy.com/">山东大学</a></li>
<li><a href="http://www.qcqxy.com/">中国科学技术大学</a></li>
</ul>
</li>
<li><a href="http://www.qcqxy.com/">华南高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">海南大学</a></li>
<li><a href="http://www.qcqxy.com/"> 广西大学</a></li>
<li><a href="http://www.qcqxy.com/">广西师范大学</a></li>
<li><a href="http://www.qcqxy.com/">广东外语外贸大学</a></li>
<li><a href="http://www.qcqxy.com/">华南理工大学</a></li>
<li><a href="http://www.qcqxy.com/">汕头大学</a></li>
</ul>
</li>
<li><a href="http://www.qcqxy.com/">华中高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">中国地质大学</a></li>
<li><a href="http://www.qcqxy.com/">华中科技大学</a></li>
<li><a href="http://www.qcqxy.com/">华中农业大学</a></li>
<li><a href="http://www.qcqxy.com/">华中师范大学</a></li>
<li><a href="http://www.qcqxy.com/">武汉理工大学</a></li>
<li><a href="http://www.qcqxy.com/">武汉大学</a></li>
</ul>
</li>
<li><a href="http://www.qcqxy.com/">东北高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">哈尔滨工业大学</a></li>
<li><a href="http://www.qcqxy.com/">吉林大学</a></li>
<li><a href="http://www.qcqxy.com/">大连理工大学</a></li>
<li><a href="http://www.qcqxy.com/">东北师范大学</a></li>
<li><a href="http://www.qcqxy.com/">东北大学</a></li>
<li><a href="http://www.qcqxy.com/">哈尔滨工程大学</a></li>
</ul>
</li>
<li><a href="http://www.qcqxy.com/">西南高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">重庆大学</a></li>
<li><a href="http://www.qcqxy.com/">四川大学</a></li>
<li><a href="http://www.qcqxy.com/">电子科技大学</a></li>
<li><a href="http://www.qcqxy.com/">西南大学</a></li>
<li><a href="http://www.qcqxy.com/">西南交通大学</a></li>
<li><a href="http://www.qcqxy.com/">云南大学</a></li>
</ul>
</li>
<li><a href="http://www.qcqxy.com/">西北高校</a>
<ul class="sub-nav">
<li><a href="http://www.qcqxy.com/">西安交通大学</a></li>
<li><a href="http://www.qcqxy.com/">兰州大学</a></li>
<li><a href="http://www.qcqxy.com/">西北工业大学</a></li>
<li><a href="http://www.qcqxy.com/">西安电子科技大学</a></li>
<li><a href="http://www.qcqxy.com/">西北农林科技大学</a></li>
<li><a href="http://www.qcqxy.com/">西北大学</a></li>
</ul>
</li>
</ul>
</div>
<!--DEMO end-->

</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航