JQ 实现无限分级导航菜单
2017-04-10 10:05
459 查看
Js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="base.css" />
<style type="text/css">
ul.nav{ width: 840px; margin: 20px auto;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li a{height: 40px; line-height: 40px; display: block;}
ul.nav > li > a{ background: #72a7ff;}
ul.nav > li > ul > li a{ background: #ffd9d9;}
ul.nav > li a:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav a.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(arrows.png) no-repeat center center;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$("ul.nav li").hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
}); [b]获取地址[/b]
$("ul.nav li").hover(function(){
$(this).parent("ul").siblings("a").addClass("choice");
},function(){
$(this).parent("ul").siblings("a").removeClass("choice");
});
if ($("ul.nav li").find("ul") .html()!="") {
$("ul.nav li").parent("ul").siblings("a").append("<a class='sub'></a>");
}
});
</script>
<ul class="nav">
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a>
<ul>
<li><a href="###">4级分类</a>
<ul>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
</ul>
</li>
<li><a href="###">4级分类</a></li>
<li><a href="###">4级分类</a></li>
<li><a href="###">4级分类</a></li>
</ul>
</li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li
14345
>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li> [b]获取地址[/b]
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="base.css" />
<style type="text/css">
ul.nav{ width: 840px; margin: 20px auto;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li a{height: 40px; line-height: 40px; display: block;}
ul.nav > li > a{ background: #72a7ff;}
ul.nav > li > ul > li a{ background: #ffd9d9;}
ul.nav > li a:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav a.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(arrows.png) no-repeat center center;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$("ul.nav li").hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
}); [b]获取地址[/b]
$("ul.nav li").hover(function(){
$(this).parent("ul").siblings("a").addClass("choice");
},function(){
$(this).parent("ul").siblings("a").removeClass("choice");
});
if ($("ul.nav li").find("ul") .html()!="") {
$("ul.nav li").parent("ul").siblings("a").append("<a class='sub'></a>");
}
});
</script>
<ul class="nav">
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a>
<ul>
<li><a href="###">4级分类</a>
<ul>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
</ul>
</li>
<li><a href="###">4级分类</a></li>
<li><a href="###">4级分类</a></li>
<li><a href="###">4级分类</a></li>
</ul>
</li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li
14345
>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li> [b]获取地址[/b]
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
<li><a href="###">3级分类</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现无限分级横向导航菜单的方法
- jquery实现无限分级横向导航菜单的方法
- JQ-CSS-实现导航菜单效果
- js、jq实现导航菜单
- JQ滑动导航菜单的实现
- 基于react实现无限分级菜单
- jq+css+html简单实现导航下拉菜单
- JQ滑动导航菜单的实现
- 基于react实现无限分级菜单
- Android 自定义横向ListView实现无限级菜单导航类目
- 实现基于Ajax的无限级菜单
- csdn的blog后台程序的导航菜单的实现
- csdn的blog后台程序的导航菜单的实现
- 用css实现了一个精致的纵向导航菜单
- csdn的blog后台程序的导航菜单的实现
- csdn的blog后台程序的导航菜单的实现
- 一个不被flash、select、activex遮挡的、跨frame的无限分级菜单
- 用css实现了一个精致的纵向导航菜单
- asp.net中用DropDownList实现无限级分类菜单
- 用css实现了一个精致的纵向导航菜单