基于jQuery实现顶部导航栏功能
今天给大家介绍一下，如何利用jQuery实现顶部导航栏功能。其实原理很简单就是利用css和JQuery样式选择器实现的。
下面举个例子具体介绍一下如何这些功能，案例如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery三级下拉列表导航菜单</title>
<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script>
<styletype="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
li{list-style:none;}
ul.navli{width:200px;text-align:center;}
ul.nav>li{float:left;margin-right:10px;}
ul.navlih3{height:40px;line-height:40px;}
ul.nav>li>h3{background:#72a7ff;}
ul.nav>li>ul>lih3{background:#ffd9d9;}
ul.nav>lih3:hover,.choice{background:#ffc0c0!important;}
ul>li>ul{display:none;}
ul>li.on>ul{display:block;}
ul.navli{position:relative;}
ul.nav>li>ul>liul{position:absolute;top:0;right:-200px;}
ul.navspan.sub{position:absolute;display:block;right:10px;top:0;width:10px;height:40px;background:url(images/arrows.png)no-repeatcentercenter;}
</style>
<scripttype="text/javascript">
$(document).ready(function(){
$("ul.navli").hover(function(){
$(this).addClass("on");
},
function(){
$(this).removeClass("on");
})
});
$(document).ready(function(){
$("ul.navli").hover(function(){
$(this).parent("ul").siblings("h3").addClass("choice");
},
function(){
$(this).parent("ul").siblings("h3").removeClass("choice");
})
});
$(document).ready(function(){
if($("ul.navli").find("ul").html()!=""){
$("ul.navli").parent("ul").siblings("h3").append("<spanclass='sub'></span>");
}
});
</script>
</head>
<body>
<ulclass="nav">
<li><h3>我的网站</h3>
<ul>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3>
<ul>
<li><h3>4级分类</h3>
<ul>
<li><h3>5级分类</h3></li>
<li><h3>5级分类</h3></li>
<li><h3>5级分类</h3></li>
<li><h3>5级分类</h3></li>
</ul>
</li>
<li><h3>4级分类</h3></li>
<li><h3>4级分类</h3></li>
<li><h3>4级分类</h3></li>
</ul>
</li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
</ul>
</li>
<li><h3>我的网站</h3>
<ul>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
</ul>
</li>
<li><h3>我的网站</h3>
<ul>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
</ul>
</li>
<li><h3>我的网站</h3>
<ul>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
<li><h3>2级分类</h3>
<ul>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
<li><h3>3级分类</h3></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。