基于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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。