本范例使用jQuery实现了一个无限下拉的树形菜单，带有动画效果，橙色表示还有子菜单，蓝色表示已是最后一级菜单，兼容各种浏览器
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<style type="text/css">
.padding {height:300px;}
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/jquery-menutree.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#wrap {position:relative; height:200px; width:130px; z-index:100;}
#nav {position:absolute; left:0; top:0;}
#nav,
#nav ul {padding:0; margin:0; list-style:none; font-family:arial, sans-serif; background:#fff; font-weight:bold;}
#nav li a {padding-left:20px; white-space:nowrap;}
#nav li ul li a {padding-left:0;}
#nav ul {padding-left:20px;}
#nav li a {color:#66b; text-decoration:none; font-size:11px;}
#nav li {font-size:13px; line-height:25px; color:#d80; cursor:pointer; width:100%;}
#nav li.down {text-indent:20px;}
#nav li a:hover {text-decoration:underline;}
</style>
<script type="text/javascript" src="http://www.sharejs.com/software/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
$(document).ready(function() {
$("ul#nav ul").hide();
$('ul#nav li:has(ul)').each(function(i) {
$(this).children().slideUp(400);
});
$('li.p1:has(ul)').click(function(event){
if (this == event.target) {
current = this;
$('ul#nav li:has(ul)').each(function(i) {
if (this != current) {$(this).children().slideUp(400);}
});
$(this).children("ul:eq(0)").slideToggle(400);
}
});
$('li.p2:has(ul)').click(function(event){
if (this == event.target) {
current = this;
$('li.p2:has(ul)').each(function(i) {
if (this != current) {$(this).children().slideUp(400);}
});
$('li.p3:has(ul)').each(function(i) {
if (this != current) {$(this).children().slideUp(400);}
});
$(this).children("ul:eq(0)").slideToggle(400);
}
});
$('li.p3:has(ul)').click(function(event){
if (this == event.target) {
current = this;
$('li.p3:has(ul)').each(function(i) {
if (this != current) {$(this).children().slideUp(400);}
});
$(this).children("ul:eq(0)").slideToggle(400);
}
});
});
</script>
在网页<body>区添加以下代码
<div id="wrap"> <ul id="nav"> <li><a href="#url">Home</a></li> <li class="p1 down">Products <ul> <li class="p2 down">Cameras</a> <ul> <li class="p3 down">Compact <ul> <li><a href="#url">Panasonic</a></li> <li><a href="#url">Nikon</a></li> <li><a href="#url">Minolta</a></li> <li><a href="#url">Ricoh</a></li> <li><a href="#url">Kodak</a></li> </ul> </li> <li class="p3 down">Digital <ul> <li><a href="#url">Canon</a></li> <li><a href="#url">Minolta</a></li> <li><a href="#url">Ricoh</a></li> <li><a href="#url">Pentax</a></li> </ul> </li> <li class="p3 down">SLR <ul> <li><a href="#url">Pentax</a></li> <li><a href="#url">Kodak</a></li> <li><a href="#url">Nikon</a></li> <li><a href="#url">Minolta</a></li> <li><a href="#url">Panasonic</a></li> </ul> </li> </ul> </li> <li class="p2 down">Lenses <ul> <li><a href="#url">Wide Angle</a></li> <li><a href="#url">Standard</a></li> <li><a href="#url">Telephoto</a></li> <li><a href="#url">Zoom</a></li> <li><a href="#url">Mirror</a></li> </ul> </li> <li><a href="#url">Flashguns</a></li> <li><a href="#url">Tripods</a></li> <li><a href="#url">Filters</a></li> </ul> </li> <li class="p1 down">Services <ul> <li><a href="#url">Printing</a></li> <li><a href="#url">Photo Framing</a></li> <li><a href="#url">Retouching</a></li> <li><a href="#url">Archiving</a></li> </ul> </li> <li class="p1 down">Contacts <ul> <li><a href="#url">Support</a></li> <li class="p2 down">Sales <ul> <li class="p3 down">USA <ul> <li><a href="#url">Arizona</a></li> <li><a href="#url">California</a></li> <li><a href="#url">Florida</a></li> <li><a href="#url">Kansas</a></li> <li><a href="#url">New York</a></li> <li><a href="#url">Texas</a></li> <li><a href="#url">Utah</a></li> <li><a href="#url">Virginia</a></li> </ul> </li> <li><a href="#url">Canadian</a></li> <li><a href="#url">Australian</a></li> <li class="p3 down">Europe <ul> <li><a href="#url">England</a></li> <li><a href="#url">France</a></li> <li><a href="#url">Germany</a></li> <li><a href="#url">Italy</a></li> <li><a href="#url">Spain</a></li> </ul> </li> <li><a href="#url">Asian</a></li> <li><a href="#url">South American</a></li> </ul> </li> <li><a href="#url">Buying</a></li> <li><a href="#url">Photographers</a></li> <li><a href="#url">Stockist</a></li> </ul> </li> <li class="p1 down">Shop <ul> <li><a href="#url">Online</a></li> <li><a href="#url">Catalogue</a></li> <li><a href="#url">Mail Order</a></li> </ul> </li> <li><a href="#url">Privacy Policy</a></li> </ul> </div>
