折叠菜单。

一、问题总结

用户需要在网站的主模块间导航,而且还要能快速浏览其他主模块的下级模块。

二、截图示例

image.png

三、参考用法

  • 用于想采用常见的侧边栏菜单,但又没有足够的空间显示所有菜单项时。
  • 用于当网站的主模块数量超过2个,并且每个主模块的子模块不少于2个时。
  • 用于当网站的主模块数量少于10个时。
  • 用于当导航区域的内容只有两级时。

四、解决方案

  • 每个标题或模块都有一个面板,点击该面板后会朝水平或垂直方向扩展,以便显示标题或模块的下一级内容,通常使用垂直方向扩展。
  • 标题的下一级内容从无到有,这个转变过程要么采用刷新网页来实现,要么采用包含JavaScript和DHTML的动画来实现。
  • 它的某一面板点击展开时,其它面板相应地折叠起来。

五、基本原理

通常将手风琴作为网站的主要导航方式,这时本模式的操作类似于导航标签模式,点击某个新面板,其它标题或模块都折叠起来。这两种模式的不同之处在于,导航标签模式中的标签是水平排列,而手风琴中的标题或模块通常是垂直排列的。

本模式还可以用作网站某模块的次级导航方式。

附录

原文链接