Web前端: 20个Javascript手风琴折叠菜单

2011年12月22日星期四

20个Javascript手风琴折叠菜单

当列表菜单项目特别多的时候，使用javascript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项、节约网页空间和方便用户点击浏览。纯CSS也可以实现悬浮效果的手风琴菜单，但是结合JavaScript能得到更好的特效和控制能力。当然，切记不要单纯的为了花俏的特效而使用JavaScript手风琴折叠菜单。

1. Accordion with color transition

在不同的面板之间进行切换时，折叠面板颜色会随之变换。

2. Completely Flexible Accordion

这个控件的折叠面板可随意，灵活定制。

3. Accordion with scriptaculous

一个基于scriptaculous开发，轻量级、跨浏览器的折叠控件。

4. Smallest Accordian (演示地址)

这个Accordian只有1149Bytes，是当前最小的折叠控件。

5. Horizontal accordion: jQuery (演示地址)

基于jquery开发，非常简单的水平方向折叠控件。

6. MooTools Accordion

可以利用Ctrl加key(1,2,3…)来控制折叠操作的控件。

7. HoverAccordion

这是一个只需移动鼠标就能够实现折叠操作的控件。

8. Horizontal Accordion

具有XBOX360 blade界面风格的水平方向Accordion。

9. jQuery plugin: Accordion (演示地址)

用于创建折叠菜单的jQuery插件。

10. Accordion Menu script (演示地址)

基于jQuery开发的可折叠菜单。

11. Drag and Drop Accordion (演示地址)

一个基于ExtJs扩展支持拖放操作的折叠控件。

12. Blue left panel (演示地址)

类似于Windows XP左边蓝色可折叠的一个面板菜单控件。

13. accordion menu

Accordion风格的jQuery菜单。

14. JavaScript accordion (演示地址)

这是一个没有依赖任何JS框架开发的Accordion控件。整个脚本只1.3kb。

15. TinyAccordion (演示地址)

TinyAccordion - Javascript手风琴菜单

支持多层嵌套的折叠控件。只有1.4kb左右。

16. BySlideMenu (演示地址)

BySlideMenu是一个Mootools插件，能够让你在任何元素上（ul/li、div、p）轻松创建漂亮的折叠菜单（accordion menu/sliding menu）。支持水平与垂直方向。菜单容器的长/宽能够自动调整。可以通过鼠标移过或单击展开/固定菜单，随你设置。可以设置菜单默认展开位置。支持Overflow。