jQuery实现的竖向导航菜单，可以任意设定菜单级数，子菜单显示带有动画效果并高亮显示每一级选中项
在网页<head>区添加以下代码
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
timer=0;
collapse = 1000;
$('.menu').height($('.menu > ul').height());
$('.menu li a').mouseover(function (event) {
if (this == event.target) {
$(this).parent().toggleClass('clicked').children('ul').animate({ width: 'show' });
$(this).siblings().children().removeClass('clicked').find('ul').animate({ width: 'hide' });
$(this).parent().siblings().removeClass('clicked').find('ul').animate({ width: 'hide' });
}
}).addClass('fly');
$('.menu li:not(:has(ul)) a').mouseout(function (event) {
if (this == event.target) {
$(this).parent().removeClass('clicked');
$(this).siblings().children().removeClass('clicked').find('ul').animate({ width: 'hide' });
$(this).parent().siblings().removeClass('clicked').find('ul').animate({ width: 'hide' });
}
}).removeClass('fly');
$(".menu").mouseover(function() {
clearTimeout(timer);
});
$(".menu").mouseout(function() {
timer = window.setTimeout(function(){
$('.menu li > a').siblings().children().removeClass('clicked').find('ul').fadeOut();
$('.menu li > a').parent().siblings().removeClass('clicked').find('ul').fadeOut();
}, collapse);
});
});
</script>
<style type="text/css">
.menu {position:relative;}
.menu ul {position:absolute; margin:0; padding:0; list-style:none; white-space:nowrap; background:#abc; border:1px solid #fff; padding:10px 0;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
.menu ul ul {display:none; left:100%; margin-top:-33px; margin-left:-5px;}
.menu li {margin:0; padding:0; list-style:none; display:inline-block; display:inline;}
.menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none; padding:0 20px 0 10px;}
.menu li a.fly {background: url(arrow-right.gif) no-repeat right top;}
.menu li:hover > a {background-color:#c60; color:#fff;}
</style>
在网页<body>区添加以下代码
<div class="menu"> <ul> <li><a href="http://www.sharejs.com">Home</a></li> <li><a href="http://www.sharejs.com">Contact Us</a> <ul> <li><a href="http://www.sharejs.com">Email</a></li> <li><a href="http://www.sharejs.com">Telephone</a></li> <li><a href="http://www.sharejs.com">Online Form</a></li> <li><a href="http://www.sharejs.com">Snail Mail Address</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Resort</a> <ul> <li><a href="http://www.sharejs.com">Ski Hire Facilities</a></li> <li><a href="http://www.sharejs.com">Main Ski Slopes</a> <ul> <li><a href="http://www.sharejs.com">Beginners Slopes</a></li> <li><a href="http://www.sharejs.com">Intermediate Slopes</a></li> <li><a class="fly" href="http://www.sharejs.com">Advanced Skill Levels</a> <ul> <li><a href="http://www.sharejs.com">Local</a></li> <li><a href="http://www.sharejs.com">Nearby</a></li> <li><a href="http://www.sharejs.com">With instructor</a></li> <li><a href="http://www.sharejs.com">Snow boarding</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Expert</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Night Life</a></li> <li><a href="http://www.sharejs.com">Restaurants</a> <ul> <li><a href="http://www.sharejs.com">Snow Hotel</a></li> <li><a href="http://www.sharejs.com">The Snowman</a></li> <li><a href="http://www.sharejs.com">Ice Cavern</a></li> <li><a href="http://www.sharejs.com">Ski Inn</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Car Hire</a> <ul> <li><a href="http://www.sharejs.com">From Airport</a></li> <li><a href="http://www.sharejs.com">In Resort</a></li> <li><a href="http://www.sharejs.com">Multiple Resorts</a></li> </ul> </li> </ul> </li> <li><a href="http://www.sharejs.com">Information</a> <ul> <li><a href="http://www.sharejs.com">Money Exchange</a></li> <li><a href="http://www.sharejs.com">Resort Essential Information</a> <ul> <li><a href="http://www.sharejs.com">Lift Passes</a></li> <li><a href="http://www.sharejs.com">Insurance</a></li> <li><a href="http://www.sharejs.com">Gear Rental</a> <ul> <li><a href="http://www.sharejs.com">Boots</a></li> <li><a href="http://www.sharejs.com">Skis</a></li> <li><a href="http://www.sharejs.com">Ski Wear</a></li> <li><a href="http://www.sharejs.com">Goggles</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Ski Schools</a></li> <li><a href="http://www.sharejs.com">Snow Report</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Language</a> <ul> <li><a href="http://www.sharejs.com">Austrian</a></li> <li><a href="http://www.sharejs.com">German</a></li> <li><a href="http://www.sharejs.com">French</a></li> <li><a href="http://www.sharejs.com">English</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Short Breaks</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Surrounding Area</a> <ul> <li><a href="http://www.sharejs.com">Where to go</a></li> <li><a href="http://www.sharejs.com">What to do</a></li> <li><a href="http://www.sharejs.com">Places of interest</a></li> <li><a href="http://www.sharejs.com">National parks & Museums</a></li> </ul> </li> <li><a href="http://www.sharejs.com">Privacy</a></li> </ul> </div>
本例用到了jQuery和一个箭头图标，图标可以下载完整版获取
