首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何设计下拉菜单(技巧+实例)

什么时候适合用下拉菜单: 陈列子页面 下拉菜单通常适用于陈列所有需要展示的页面,相当于一个导航菜单,如下图: ? 博客内容分类 许多博客都会选择用下拉菜单来进行分类和罗列标签。...保留菜单标签/说明 打开下拉菜单时,最好是标明菜单标签或说明。菜单标题能有效地提醒用户,他们刚刚选择了什么内容。如果菜单打开后标签消失了,用户就得打断操作、去回忆到底该选择什么选项。...支持键盘输入 应支持键盘输入和按键,以在下拉菜单内进行导航 。在下拉菜单中,访问键应允许用户在不使用鼠标的情况下快速选择可见选项。在下拉框中,用户应该能够键入字母、并快速导航到以该字母开头的选项。...这个办法方便快捷,但是仅适用于简单的罗列文字的下拉菜单。 ? 第二种,下拉选择+弹出面板。...从组件面板中拖出一个下拉选择组件和一个弹出面板,在弹出面板中编辑出下拉菜单的下拉内容,再将弹出面板同下拉选择组件进行拼凑、交互。

2.9K84
您找到你想要的搜索结果了吗?
是的
没有找到

Halo-Theme-Hao文档:如何设置导航栏?

1标题 进入站点后台 点击左侧面板中的主题 点击上方的导航 修改标题字段即可 2主菜单菜单即网站导航栏中间部分的菜单 进入站点后台 点击左侧面板中的菜单 点击主菜单 点击右上角的新增 可以通过拖拽调整缩进...,从而创建菜单 填写相应表单即可 3标题左侧相关链接 进入站点后台 点击左侧面板中的菜单 新增一个菜单,如媒体 按照自己的需求新增菜单项 点击左侧面板中的主题 点击顶部的导航导航栏左侧相关链接设置成你刚刚新建的菜单即可...版本>=1.3.2起,顶部菜单理论支持无限级,并且可自由配置菜单的显示方向 4如何取消左上角导航 暂时没有办法进行取消,这里与主题无关,如果需要取消,建议创建一个空菜单,然后选择空菜单即可。...5导航栏图标 不仅仅可以对主菜单设置图标,还可以对左上角导航设置,可以参考下面教程进行配置。...使用方式 在创建菜单时,可以选择设置图标,图标格式为 haofont xxxxx,注意前缀为 haofont 自定义导航栏图标 自定义导航栏图标:https://www.yuque.com/liuzhihangs

45430

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴面板: 与手风琴标题相关联的内容 在某些手风琴中,总会有其他元素与手风琴标题视觉临近。例如,每个手风琴标题都伴随一个菜单按钮来提供每个模块的访问操作。...同样重要的是,避免设计自动消失的警告。一个消失太快的警告,可能导致不符合 WCAG 2.0 success criterion 2.2.3。另一个重要的设计考虑是警告引起的终端频率。...Shift + F10: 如果选项卡有关联的弹出菜单,则打开菜单。 Delete (可选地): 如果允许删除操作,删除(关闭)当前选项卡元素和其相关联选项卡面板。...如果当触发元素获得焦点时唤起工具提示组件,当元素失去焦点时(onBlur),工具提示组件消失。如果鼠标移入唤起工具提示组件,则鼠标移出时消失。...开节点 被展开以使其节点可见的父节点。 闭节点 被折叠以使其节点不可见的父节点。 当使用键盘来导航一个树结构,一个可见的键盘指示器告诉用户哪个节点被聚焦。

4.5K30

SAO UI Plan -- SAO Utils WEB 2.0

优化了左侧属性面板的内容排布,使用绝对高度。 属性面板内容超出自动转为滚动条。 改动三级菜单的显隐逻辑,也为点按显示 新增次级菜单的偏移量调整。 新增了说明书配置项,内附本帖链接。...因为右键菜单是动态出现的,故而我用的都是绝对长度,自然也不会去考虑和窗口整体大小比例自适应的问题。 一开始是在静态页面上写的纯静态效果,依靠hover动作控制显隐属性。但是这就导致我遇到了一系列问题。...网上的参考内容都是针对于菜单在父级元素内部的情况,那确实可以靠hover轻松搞定,但是我设置了一堆偏移量和伪类,导致菜单和父菜单关键的连接轴是个伪类,hover无效啊喂!。...一种是全部通过点击来展开菜单。但是这样子一来每次点击都要记得关闭,用清空已激活项来初始化的话,二级和三级又要写另一套逻辑。Pass。 一种是依靠悬停加延时消失来控制显隐。...虽然也算是靠谱了,但是二级消失连带着三级也消失了,还是得天下武功,唯快不破!把延时消失时间设长,观感又很差。Pass。

2K20

Axure RP8入门之基本操作篇

提示文字设置包含{隐藏提示触发}选项,其中: 输入:指用户开始输入时提示文字才消失。 获取焦点:指光标进入文本框时提示文字即消失。...### 46.关闭/恢复功能面板 面板可以在弹出状态下点击【×】将其关闭,也可以在【视图】-【功能区】菜单中进行关闭或开启。如果需要将功能区所有面板恢复默认。...导航菜单【发布】-【预览设置】中进行预览的设置。 ## 50.生成HTML查看原型 生成原型的快捷键为键。或者,点击快捷功能中的生成图标,选择【生成HTML文件】进行生成。...还可以通过导航菜单【发布】-【生成HTML文件…】中进行生成。...注意,级页面无法单独发布,勾选级页面时会自动勾选父级页面。如果需要单独发布级页面,需要在页面管理面板中将级页面的级别调整到一级页面。

5K30

云服务器安装宝塔面板,如何对高并发大流量网站的优化方法策略

释放方法:登陆宝塔面板点击左侧导航的【 计划任务 】,选择任务类型为释放内存,根据自己需要设置执行周期和执行时间,然后点击确定即可。...安装方法:登录宝塔面板,在左侧导航菜单点击【 软件管理 】,找到您正在使用的 php 版本,点击右侧的 【 设置 】 ,进入php 管理界面,在php管理界面点击左侧的【 安装扩展 】,选择您需要的缓存进行安装...配置方法:登录宝塔面板,在左侧导航菜单点击【 软件管理 】,找到您正在使用的 php 版本,点击右侧的 【设置】 ,进入php 管理界面,在php管理界面点击左侧的【 配置修改 】,把 memory_limit...设置方法:登录宝塔面板,在左侧导航菜单点击【 软件管理 】,找到您正在使用的 php 版本,点击右侧的【设置 】,进入php 管理界面,在php管理界面点击左侧的 【性能调整】,选择并发方案,然后保存即可...设置方法:登录宝塔面板,在左侧导航菜单点击【软件管理】,找到您正在使用的 MySQL 版本,点击右侧的 【设置 】,进入 MySQL 管理界面,在 MySQL 管理界面点击左侧的 【 性能调整 】,根据您的服务器配置选择优化方案

3.4K30

导航设计的15个原则

导航菜单的重要性已经不言而喻,我们平时遇到的每一个网站或软件中都有它的存在;但并不是所有的导航菜单都设计得准确无误。我们也常发现用户因导航设计不当而感到困惑、难以操作,或者连导航在哪儿都不知道。...下面的设计原则,可以避免导航菜单出错。 导航菜单要清晰可见 大屏中的导航菜单不要太小。如果空间足够,不要将菜单隐藏。 把导航菜单放在用户熟悉的位置。...如果没有让用户明确所在位置、导致他们迷路,那么就犯了网站设计最基本的错误。讽刺的是用户不总是通过首页到达目的页,所以导航菜单对于用户来说意义重大。 导航菜单要与用户任务协调一致 使用易懂的链接标签。...对于大型网站来说,让用户通过导航菜单预览级内容。对于喜欢挖掘网站各层级内容的典型用户来说,下拉菜单可以让用户快速浏览、节省时间。 为息息相关的内容提供本地导航。...鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感,因为用户还没来得及点击菜单里的某个链接的时候,下拉菜单消失了。另外,太长的垂直导航菜单也不利于底部选项的点击,除非滚动屏幕。

1.5K10

Bootstrap笔记

、section等respond让低版本浏览器可以支持CSS媒体查询功能基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类代码样式栅格系统响应式工具类预置界面组件导航导航条面包屑导航下拉菜单按钮式下拉菜单按钮组输入框组警告框页头分页列表组面板媒体对象进度条...Glyphicons标签徽章缩略图大屏幕嵌入内容内嵌JavaScript插件JavaScript插件的依赖情况如何使用Javascript插件内置组件模态对话框下拉菜单滚动监听标签页工具提示弹出框警告框按钮折叠面板轮播图吸顶效果...data-spy=”affix”data-offset-top=”什么位置出现”data-offset-bottom=”什么位置消失”深度自定义 Bootstrap在线自定义官网在线中文网在线源码编译LESS...导航条 面包屑导航 下拉菜单 按钮式下拉菜单 按钮组 输入框组 警告框 页头 分页 列表组 面板 媒体对象 进度条 Glyphicons 标签 徽章 缩略图 大屏幕 嵌入内容 内嵌 JavaScript...插件 JavaScript插件的依赖情况 如何使用Javascript插件 内置组件 模态对话框 下拉菜单 滚动监听 标签页 工具提示 弹出框 警告框 按钮 折叠面板 轮播图 吸顶效果 data-spy

3.3K90

网络故障解疑:找回消失的本地连接(多图)

要检查网卡是否工作正常时,你只要依次单击“开始”/“设置”/“控制面板”命令,在弹出的控制面板窗口中,双击“系统”图标,在弹出的系统属性设置窗口中,打开“硬件”标签页面,再单击其中的“设备管理器”按钮,...因此,一旦发现本地连接图标丢失时,你不妨按照下面的步骤,检查一下系统是否已经安装了简单TCP/IP组件: 依次单击“开始”/“设置”/“控制面板”命令,在打开的系统控制面板窗口中,双击“添加/删除程序...检查DCOM权限设置是否正确 系统分布式COM的模拟级别权限,如果设置不当的话,也会导致网络和拨号连接窗口中的本地连接图标消失,所以要想找回消失的本地连接图标,你还需要按照下面的方法,检查一下系统DCOM...在该编辑窗口中,单击菜单栏中的“文件”菜单项,从弹出的下拉菜单中执行“打开注册表”命令,在接着出现的图5所示的窗口中,双击其中的“本地用户”图标,在其后出现的属性设置界面中,依次展开“外壳界面”、“限制...依次展开其中的“用户配置”文件夹、“Windows 设置”文件夹、“Internet Explorer 维护”文件夹、“连接”文件夹,在对应“连接”文件夹右边的窗口中,双击“连接设置”选项; 在随后出现的如图

2.6K10

UG常用快捷键

“装配导航器”或“序列导航器”的组件弹出菜单中选择“拆装”。...”或“序列导航器”中的弹出菜单)。...在“序列导航器”下的细节面板中,可以向其中的步骤或序列节点添加信息,如描述、时间或成本。 12. 从工具条或“序列导航器”弹出菜单选择命令,或通过拖动步骤,可按照意图更改序列。...可以使用下列的方法之一来更改“序列导航器”中的列: o 在列层叠菜单(在“序列导航器”的背景弹出菜单上)内通过切换可显示或隐藏列。...在回放期间,会从图形窗口中的次序视图中添加或移除组件,(如果“细节”面板中的“显示拆分屏幕”处于打开状态)。同时,“序列导航器”会用图标来标记当前的和完成的步骤。

3.4K40

CodeWave系列:3.CodeWave 智能开发平台 页面布局及呈现

多用于有多层次的页面结构或较为复杂需要清晰的导航路径的应用中。 侧边栏: 侧边栏组件提供可供选择的侧边栏项,通常位于应用主要内容区域的一侧,用于应用导航菜单、应用设置等场景。...导航栏: 导航栏通常位于页面的顶部或固定位置。通过导航栏项,可以快速导航到网页应用的各个主要页面,例如首页、产品页面、服务页面等。...**下拉菜单:**提供弹出式的下拉菜单项可供选择,通常用于应用导航,通过下拉菜单项可快速浏览应用。 3.2 容器 页面容器: 每个页面生成的时候均会自带一个页面容器,用于展示页面内容。...支持自行调整页面容器的位置。 面板面板用于将相关的内容组织在一起,通常用于包装一组相关的内容,分块呈现页面内容,例如用面板包装一组表单、一组操作按钮等。...面板提供三个插槽:面板标题、面板内容、额外插槽(右上角)。 基本用法: 面板分组: 3.3 表格 数据表格:数据表格以二维表格形式呈现数据,通常包含行和列,用于展示相关的数据信息。

16410

Flutter TolyUI 框架#05 | 树形菜单设计

本文将探讨 TolyUI 在树形导航菜单中的设计。 1. 树形菜单设计动机 树形菜单是 Flutter 本身不支持的,但在桌面端或 Web 端中是非常常见。...组件/导航/rail_menu_tree: toly1994.com/ui/#/widget… 1. 菜单节点树的解析 如果仅靠手动书写菜单节点树,会写出非常复杂的代码。...树形结构的映射关系,也可以通过网络请求 json 数据解码获得,这样就可以动态化配置菜单树。 3. 仅展开一个面板 有时我们希望可以在展开菜单面板时,关闭其他已展开面板。...树形菜单配置参数 树形菜单和侧栏菜单类似,可以配置上方和下方区域的组件,以及右侧边线区域,可拉伸面板。...导航模块也完成了两个非常重要的组件,下一步会继续对导航模块进行开发,目标是下拉菜单 DropMenu,敬请期待 ~ 感谢你关注 tolyui 的成长,如果喜欢,也希望你能在 github 中点赞支持~

14710

WordPress纯手工操作优化服务器性能和SEO方法,让排名上首页稳定不掉。(wordpress优化加快的好多个关键点)

释放方法:登陆宝塔面板点击左侧导航的【 计划任务 】,选择任务类型为释放内存,根据自己需要设置执行周期和执行时间,然后点击确定即可。...安装方法:登录宝塔面板,在左侧导航菜单点击【 软件管理 】,找到您正在使用的 php 版本,点击右侧的 【 设置 】 ,进入php 管理界面,在php管理界面点击左侧的【 安装扩展 】,选择您需要的缓存进行安装...配置方法:登录宝塔面板,在左侧导航菜单点击【 软件管理 】,找到您正在使用的 php 版本,点击右侧的 【设置】 ,进入php 管理界面,在php管理界面点击左侧的【 配置修改 】,把 memory_limit...设置方法:登录宝塔面板,在左侧导航菜单点击【 软件管理 】,找到您正在使用的 php 版本,点击右侧的【设置 】,进入php 管理界面,在php管理界面点击左侧的 【性能调整】,选择并发方案,然后保存即可...设置方法:登录宝塔面板,在左侧导航菜单点击【软件管理】,找到您正在使用的 MySQL 版本,点击右侧的 【设置 】,进入 MySQL 管理界面,在 MySQL 管理界面点击左侧的 【 性能调整 】,根据您的服务器配置选择优化方案

1K30

来自用户体验大师的100个UX设计建议——上篇

5.png 六、关于导航设计 28. 在网站上设置一个明显的路径供用户访问导航菜单。 29. 如果你的网站层次结构超过3-4级,是时候考虑重新设计了。 30....考虑使用粘性菜单导航(跟随浏览器滚动的导航),特别是在较长的网页中或需要快速访问时。 31. 一个好的网站导航并不会妨碍网页,使用后会消失在背景中。 32....移动端导航设计:显示最常用的选项,并将其他选项隐藏在汉堡包菜单下。 36. 桌面端的汉堡菜单使用场景较少,因为它并不是非常引人注目,用户也不熟悉,增加了交互成本,减少了信息的呈现。 37....对于手机的辅助导航,可以使用分类登录页面、菜单或页面内菜单。 38. 菜单下拉列表应该是垂直的,而不是水平悬停,因为水平滚动要困难得多。 39....将表单错误提示放在网页表单中所有导致错误的字段旁边。 46. 错误消息提示应该是有用的、可用的、简洁的和容易理解的。 47.

1.6K30

Adobe dreamweaver CS6小白入门教程「建议收藏」

9.1.1创建嵌套APDiv(与父的关系) 插入–布局对象–AP Div 9.1.2.隐藏所有APDiv标签 查看–可视化助理–隐藏所有 9.1.3.性质以及多个层同时操作 可在右侧工具栏...9.2设置APDiv的属性 在属性面板和AP元素面板中 9.2.1设置APDiv显示/隐藏属性 9.2.2.改变APDiv堆叠顺序(见上图Z) 在AP元素面板中的Z轴属性值更改...) Spry框架支持一组标准html、CSS、JavaScript编写可重用构件, 设置构件样式: 9.4.1.使用Spry菜单栏:一组可导航菜单按钮 9.4.2.使用Spry...选项卡式面板:显示或隐藏存储在选项卡式面板中内容 9.4.3.使用Spry折叠式 9.4.4.使用Spry折叠面板(只针对一个导航项) 9.5利用APDiv制作网页下拉菜单 先新建一个APDiv...,确定合适的位置,插入表格(宽度100% 间距…),填好文字 选中导航栏的一个小格子,窗口–行为–“+”来建立导航栏和下拉菜单的关系 (显示–over ;隐藏–out) 10.用CSS修饰美化网页

7.1K30
领券