http://www.helloweba.com/view-blog-175.html
手风琴菜单一般用于下拉导航，由于外观非常简洁，使用起来跟手风琴一样可以拉伸和收缩而得名，项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。

Demo: http://www.helloweba.com/demo/multi_menu/
Download: http://www.helloweba.com/demo/down/multi_menu.rar
HTML
首先在head间引用jQuery和插件。

接着，在body间写上菜单主体代码，HTML代码将由一系列无序列表组成。

CSS
当然，我们要为这个无序列表加上样式，让它非常简洁的呈现在屏幕上。

jQuery
调用accordion插件，设置相关属性，一个漂亮的手风琴效果就完成了。

可以看出，区分多级，其实是靠css的背景等信息来区分的。

Accordion提供以下选项设置：
speed：数字毫秒，设置菜单展开和关闭的时间。
closedSign：当下级菜单关闭时，显示于菜单旁边的内容，可以是任意html或者text。
openedSign：当下级菜单展开时，显示于菜单旁边的内容，可以是任意html或者text。
注意，如果你想菜单初始载入时就展开的话，可以在对应要展开的li上加class=”active”。
声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接，否则视为侵权。