(翻译)折叠菜单(Accordion Menu)
问题概述
用户需要在网站的主模块间导航,而且还要能快速浏览其他主模块的下级模块。[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.
(翻译)折叠菜单(Accordion Menu)相关推荐
- 滑动式折叠菜单 - Slashdot's Menu
折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始"动"起来了,本文介绍的就是 DimX ...
- html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件 通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...
- php 折叠菜单,SlashdotMenu 折叠菜单
简明现代魔法 -> JavaScript -> SlashdotMenu 折叠菜单 SlashdotMenu 折叠菜单 2009-08-19 Slashdot Menu效果演示 控制菜单的 ...
- jQueryHTMLCSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- cocos2dx-lua使用UIListView制作二级折叠菜单
折叠菜单,用过jquery accordion的同学都知道是啥玩艺儿~,图片效果就是介样: cocos2dx不带有此控件,因此我们动手来实现一个. 原理很简单,展开的时候往listview里inser ...
- HTML基础6折叠菜单手风琴菜单
页面主体部分: <body><ul id="menu"><li> <a href="#">一级菜单1</a ...
- bootstrapjs 动态折叠菜单,按钮控制伸缩 ,升华版
代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
- android菜单(menu)资源
一. 菜单资源通常放在res/menu目录下,菜单资源是的根元素通常是<menu></menu>标记,在该标记下可以包含以下两个元素. 1.<item></i ...
- html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...
- 前台特效(9)无限极分类折叠菜单
在程序中经常会用到无限极分类菜单,经常性的会被绕的头昏脑胀,整理了一个简洁的方式,希望对你有帮助,轻喷!! <!DOCTYPE html><!-- by longdd 2013.4. ...
最新文章
- 企业区块链应用程序的两个关键问题
- 统一同一物理主机上VMware虚拟出的不同操作系统如何通信
- easyui 常用按钮图标
- IMEI, ESN, MEID
- 挖掘协同的力量 大OA前景广阔
- xmu 1254.异或求和
- 如何在ESXi 5.5主机上安装ESXi 5.5客户机
- Periodic Signal
- 使用Beautifulsoup去除特定标签
- Java之spring新手教程(包教包会)
- linux下安装oracle instant client,linux下安装Oracle instant client
- 2020最新最稳微信公众号爬虫
- drupal 8 php filter,Drupal 7 与 Drupal 8 的一些变化
- python:tushare 获取A股指数数据,并使用LSTM预测
- ES自动化集群搭建脚本shell
- 2021年深圳盐田区绿色建筑与装配式建筑发展资金申报资助及条件,补贴200万
- requests库请求获取不到数据怎么办?不妨试试看这种妙法
- 2018双11万家互联网门店参战:看苏宁的撩人新姿势
- OpenGL ES 3. 天空盒 立方体贴图
- 炒菜,我把厨房烧了!
热门文章
- cachecloud部署和创建机器
- maxscale mysql 主从_使用Maxscale实现mysql读写分离
- java异或运算_java中异或怎么运算?
- wiki(维基)系统
- oracle sql格式化 补零,sql语句格式化数字(前面补0)、替换字符串
- 简单matlab插值函数
- java quartz定时_Java初级面试题之Quartz定时任务
- AISG2.0(二)——什么是电调天线,及AISG在其中的应用
- MATLAB的数据类型
- .net core | donet core IIS 文件路径问题