问题概述
用户需要在网站的主模块间导航，而且还要能快速浏览其他主模块的下级模块。[1]
示例
用途
- 用于想采用常见的侧边栏菜单，但又没有足够的空间显示所有菜单项时；
- 用于当网站的主模块数量超过2个，并且每个主模块的子模块不少于2个时；
- 用于当网站的主模块数量少于10个时；
- 用于当导航区域的内容只有两级时。
解决方案
- 折叠菜单中的每个标题或模块都有一个面板，点击该面板后会朝水平或垂直方向扩展，以便显示标题或模块的下一级内容，通常使用垂直方向扩展[2]；
- 标题的下一级内容从无到有，这个转变过程要么采用刷新网页来实现，要么采用包含JavaScript和DHTML的动画来实现；
- 折叠菜单中的某一面板点击展开时，其它面板相应地折叠起来。
说明
通常将折叠菜单作为网站的主要导航方式，这时本模式的操作类似于导航标签模式，点击某个新面板，其它标题或模块都折叠起来。这两种模式的不同之处在于，导航标签模式中的标签是水平排列，而折叠菜单中的标题或模块通常是垂直排列的。[3]
本模式还可以用作网站某模块的次级导航方式。[4]
原文地址：http://ui-patterns.com/patterns/AccordionMenu
[1]原文：User needs to navigate among a website’s main sections while still being able to quickly browse to the subsection of another.
[2]原文：Each headline / section has a panel, which upon clicking can be expanded either vertically or horizontally into showing its subsections. Vertical Accordion menus are the most frequently used.
[3]原文：Accordion menus are often used as a website’s main navigation. In this way, it acts much like Navigation Tabs, as menu items are collapsed when a new panel is clicked. Where the Navigation Tabs are most often used horizontally, Accordion menus are most often used vertically.
[4]原文：Accordion menus can however also function quite well as sub-navigation for a specific section of a website.