以下是 jQuery垂直多级导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery垂直多级导航菜单代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<ul class="ce">
<li> <a class="xz" href="#">目录A</a> </li>
<li>
<a href="#">目录B <img class="more" src="images/more.png" /></a>
<ul class="er">
<li> <a href="##">二级目录A</a> </li>
<li class="e_li">
<a href="##">二级目录B</a>
<ul class="thr">
<li> <a href="##">三级目录A</a> </li>
<li>
<a href="##">三级目录B <img class="more1" src="images/more1.png" /></a>
<div class="thr_nr">
<h3> 三级目录B主要内容 </h3>
<img src="images/aa.png" />
</div>
</li>
<li> <a href="##">三级目录C</a> </li>
<li>
<a href="##">三级目录D <img class="more1" src="images/more1.png" /></a>
<div class="thr_nr">
<h3> 三级目录D主要内容 </h3>
<img src="images/bb.png" />
</div>
</li>
<div class="clear"></div>
</ul>
</li>
<li> <a href="##">二级目录C</a> </li>
<li class="e_li">
<a href="##">二级目录D</a>
<ul class="thr">
<li> <a href="##">三级目录A</a> </li>
<li> <a href="##">三级目录B</a> </li>
<li> <a href="##">三级目录C</a> </li>
<li> <a href="##">三级目录D</a> </li>
<div class="clear"></div>
</ul>
</li>
</ul>
</li>
<li> <a href="#">目录C</a> </li>
<li> <a href="#">目录D</a> </li>
<li> <a href="#">目录E</a> </li>
<li>
<a href="#">目录F <img class="more" src="images/more.png" /></a>
<ul class="er">
<li> <a href="##">二级目录A</a> </li>
<li> <a href="##">二级目录B</a> </li>
<li> <a href="##">二级目录C</a> </li>
<li> <a href="##">二级目录D</a> </li>
</ul>
</li>
<div class="clear"></div>
</ul>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JS代码(main.js):
$(function(){
$(".ce > li > a").click(function(){
$(this).addClass("xz").parents().siblings().find("a").removeClass("xz");
$(this).parents().siblings().find(".er").hide(300);
$(this).siblings(".er").toggle(300);
$(this).parents().siblings().find(".er > li > .thr").hide().parents().siblings().find(".thr_nr").hide();
}
) $(".er > li > a").click(function(){
$(this).addClass("sen_x").parents().siblings().find("a").removeClass("sen_x");
$(this).parents().siblings().find(".thr").hide(300);
$(this).siblings(".thr").toggle(300);
}
) $(".thr > li > a").click(function(){
$(this).addClass("xuan").parents().siblings().find("a").removeClass("xuan");
$(this).parents().siblings().find(".thr_nr").hide();
$(this).siblings(".thr_nr").toggle();
}
)}
)CSS代码(style.css):
/* CSS Document */
*{margin:0px;padding:0px;}
html,body{height:100%;}
li{list-style-type:none;}
img{border:0px;vertical-align:middle;}
a{text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}
.clear{clear:both;}
.ce{display:block;width:150px;background:rgb(50,50,50);position:fixed;z-index:5;top:0px;left:0px;}
.ce li{border-bottom:1px solid rgb(40,40,40);border-top:1px solid rgb(90,90,90);}
.more{margin-left:36px;}
.ce li a{padding:10px 10px 10px 40px;color:white;display:block;cursor:pointer;background:url(../images/tu.png) no-repeat 10px center;}
.ce li a:hover{background:url(../images/tu.png) no-repeat 10px center rgb(220,31,31);}
.ce li .dqian{background:none}
.ce li .xz{background:url(../images/tu.png) no-repeat 10px center rgb(220,31,31);}
.er{display:none;width:150px;background:rgb(100,100,100);}
.er li{width:100%;border:solid rgb(140,140,140);border-width:1px 0px 0px;}
.er li a{display:block;padding:10px 10px 10px 20px;color:white;background:none;font-size:15px;}
.er .e_li a{background:url(../images/more.png) no-repeat 120px center;}
.er li a:hover,.er li .sen_x{background:rgb(253,83,49);}
.er .e_li a:hover,.er .e_li .sen_x{background:url(../images/more.png) no-repeat 120px center rgb(253,83,49);}
.thr{background:rgb(150,150,150);display:none;}
.thr li{margin-bottom:1px;border-top:1px solid rgb(180,180,180);position:relative;}
.er .e_li .thr li a{background:none;}
.er .e_li .thr li a:hover{background:rgb(249,152,49);}
.er .e_li .thr li .xuan{background:rgb(249,152,49);}
.more1{margin-left:28px;margin-top:-4px;}
.thr_nr{width:300px;position:absolute;top:0px;left:150px;z-index:10;border:1px solid rgb(201,201,201);display:none;}
.thr_nr h3{font-weight:normal;font-size:18px;display:block;text-align:center;width:100%;padding:10px 0px;}
.thr_nr img{width:100%;}
.ti{width:29px;height:29px;float:left;padding-top:3px;cursor:pointer;text-align:center;margin-right:10px;margin-top:40px;margin-left:20px;background:url(../images/11.png) no-repeat;}
.inpu{cursor:pointer;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;width:29px;height:29px;}
.span{float:left;display:block;padding:4px 40px 0px 0px;color:#000;}
.tu1{width:29px;height:29px;float:left;padding-top:3px;cursor:pointer;text-align:center;margin-right:10px;margin-top:40px;margin-left:20px;background:url(../images/22.png) no-repeat;}
.span1{color:#f00;float:left;display:block;padding:4px 40px 0px 0px;}
.span2{color:#000;}
分享到QQ
分享到微博
微信扫一扫
