前几天因为公司的菜单要调整，公司的UI框架是不支持的，所以就自己在网上找了一个下拉菜单，可以支持多级菜单数据的，菜单数据是从xml文件中配置后读取的，网上有许多这方面的例子感觉不是很好用，就打了个包贴在园子里了。效果图片如下：
aaarticlea/png;base64,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" alt="" />
上图片展示的是三级，应该还可以根据自己的需要扩展多级的。
不想下载的朋友可以直接复制源码内容，总共三个文件，一个html文件，另外一个是js扩展库，还有一个是jquery库在这里使用的是gg的一个包：
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现多级手风琴菜单</title>
<meta name="keywords" content="多级下拉菜单, jquery插件" />
<meta name="description" content="XHTML、CSS、jquery、PHP案例和示例" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(function(){
$(".nav").accordion({
//accordion: true,
speed: ,
closedSign: '[+]',
openedSign: '[-]'
});
});
</script>
<style>
ul{list-style:none}
.demo{width:300px; margin:40px auto; padding:10px; background:#f7f7f7}
.nav {width: 213px; padding: 40px 28px 25px ; font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;}
ul.nav {padding: ; margin: ; font-size: 1em; line-height: .5em; list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #; display: block; text-decoration: none; font-weight: bolder;}
ul.nav li a:hover {background-color:#675C7C; color:white;}
ul.nav ul { margin: ; padding: ;display: none;}
ul.nav ul li { margin: ; padding: ; clear: both;}
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;}
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}
ul.nav ul ul li a {color:silver; padding-left: 40px;}
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}
ul.nav span{float:right;}
</style>
</head> <body>
<div id="main"> <div class="demo">
<ul class="nav">
<li><a href="http://renzaijianghu.cnblogs.com" target="_blank">首页</a></li>
<li><a href="#">服务</a>
<ul>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MYSQL</a></li>
<li><a href="#">LINUX</a></li>
</ul>
</li>
<li><a href="#">案例</a></li>
<li><a href="#">文章</a></a>
<ul>
<li class="active"><a href="http://renzaijianghu.cnblogs.com" target="_blank">XHTML/CSS</a></li>
<li><a href="#">Javascript/Ajax/jQuery</a>
<ul>
<li><a href="#">Cookies</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Images</a></li>
</ul>
</li>
<li><a href="http://renzaijianghu.cnblogs.com" target="_blank">PHP/MYSQL</a></li>
<li><a href="http://renzaijianghu.cnblogs.com" target="_blank">前端观察</a></li>
<li><a href="http://renzaijianghu.cnblogs.com" target="_blank">HTML5/移动WEB应用</a></li>
</ul>
</li>
<li><a href="http://renzaijianghu.cnblogs.com/about.html" target="_blank">关于</a></li>
</ul>
</div>
</div> </body>
</html>
accordion.js
/*
* jQuery UI Multilevel Accordion v.1
*
* Copyright (c) 2011 Pieter Pareit
*
* http://www.scriptbreaker.com
*
*/ //plugin definition
(function($){
$.fn.extend({ //pass the options variable to the function
accordion: function(options) { var defaults = {
accordion: 'true',
speed: ,
closedSign: '[+]',
openedSign: '[-]'
}; // Extend our default options with those provided.
var opts = $.extend(defaults, options);
//Assign current element to variable, in this case is UL element
var $this = $(this); //add a mark [+] to a multilevel menu
$this.find("li").each(function() {
if($(this).find("ul").size() != ){
//add the multilevel sign next to the link
$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>"); //avoid jumping to the top of the page when the href is an #
if($(this).find("a:first").attr('href') == "#"){
$(this).find("a:first").click(function(){return false;});
}
}
}); //open active level
$this.find("li.active").each(function() {
$(this).parents("ul").slideDown(opts.speed);
$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
}); $this.find("li a").click(function() {
if($(this).parent().find("ul").size() != ){
if(opts.accordion){
//Do nothing when the list is open
if(!$(this).parent().find("ul").is(':visible')){
parents = $(this).parent().parents("ul");
visible = $this.find("ul:visible");
visible.each(function(visibleIndex){
var close = true;
parents.each(function(parentIndex){
if(parents[parentIndex] == visible[visibleIndex]){
close = false;
return false;
}
});
if(close){
if($(this).parent().find("ul") != visible[visibleIndex]){
$(visible[visibleIndex]).slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").html(opts.closedSign);
}); }
}
});
}
}
if($(this).parent().find("ul:first").is(":visible")){
$(this).parent().find("ul:first").slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
}); }else{
$(this).parent().find("ul:first").slideDown(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
});
}
}
});
}
});
})(jQuery);