JQuery-UI侧菜单悬停区域太宽 - 腾讯云开发者社区

文章/答案/技术大牛

发布

导航设计的15个原则

下面的设计原则，可以避免导航菜单出错。导航菜单要清晰可见大屏中的导航菜单不要太小。如果空间足够，不要将菜单隐藏。把导航菜单放在用户熟悉的位置。...确保导航菜单拥有足够的视觉吸引力。很多导航菜单的周围会留有一点空白区域以从视觉上突显它。但当网站UI元素比较拥挤时，如果导航菜单视觉比重太弱就会在各色图形、促销广告、标题里迷失，不易被用户识别。...鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感，因为用户还没来得及点击菜单里的某个链接的时候，下拉菜单就消失了。另外，太长的垂直导航菜单也不利于底部选项的点击，除非滚动屏幕。...最后，鼠标悬停触发的下拉菜单不能太宽，否则会让用户误以为是新页面、并且好奇为什么自己还没点击就出现了新的“页面”？当页面内容很长时，可以考虑悬浮吸顶（或固底）菜单。...尽可能缩短导航菜单最常用操作的物理距离。下拉菜单内容比较多时，将用户最常点击的链接放到离鼠标悬停的选项最近的地方可以减少鼠标移动的距离（移动端也类似）。

2.2K1 0

响应式设计进阶：不同屏幕尺寸下的交互优化方案

为什么仅做“布局自适应”不够交互差异是核心：移动端以触控为主，桌面端以鼠标/键盘为主；是否支持悬停、指针精度、可视区域大小直接影响交互设计信息优先级变化：小屏强调任务路径清晰与最小认知负担；大屏强调并行操作与高密度信息...预览卡，减少主流程阻塞精准点击：可适当缩小点击区但保持舒适性键盘与可访问性焦点顺序：符合文档流与任务流；显式焦点可见快捷键：为高频任务提供快捷键（注意与系统保留键不冲突） ARIA：动态面板、菜单...大屏（≥1200）三栏/工作台：侧导航 + 主内容 + 辅助面板高密度表格/看板：支持并行编辑、批量操作浮动工具条：减少鼠标偏航，遵循费茨定律容器查询：根据组件宽度而不是视口宽度调整密度 ....{ .card__meta { display: grid; grid-template-columns: 1fr; } } 四、关键组件的响应式交互设计导航移动端：底部 3–5 项；二级菜单用抽屉或全屏模态...，允许搜索直达桌面端：顶部主导航 + 侧栏二级；悬停预览、键盘快捷键搜索优先：输入建议支持触控选择与键盘导航表格与数据密集视图列优先级：窄屏隐藏低优列；提供“展开行”查看详情横向滚动：保留关键列固定

2801 0

您找到你想要的搜索结果了吗？

是的

没有找到

SAO UI Plan -- Ranklist

悬停提示语默认使用感谢**打赏￥**字样。更改打赏二维码分辨率。修复扫一扫无效的bug。...新建: 新建, 修改,引入排行榜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为: 新建,控制显隐逻辑：修改,添加CDN配置项和菜单选项：调用榜单：榜单使用方法调用，可以加装在任何元素上，使用触发点击调用...此处提供加装到侧栏按钮的方案。修改, 虽然初版榜单也可以通过信息调整充当打赏榜单的功能，但是相对的信息表达上不是特别明晰。打赏榜方案做了一些细节上的优化，必要信息为打赏金额和打赏人名称以及等级。...新建: 新建, 修改,引入排行榜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为: 新建,控制显隐逻辑：修改,添加CDN配置项和菜单选项：调用榜单：榜单使用方法调用，可以加装在任何元素上，使用触发点击调用...此处提供加装到侧栏按钮的方案。修改, TO DO 实现SAO UI风格的血量排行榜血量自动计算血条颜色自动匹配显隐功能提取，支持加装到任意按钮曲面3D化

7972 0

4月7日星期四晴论技术负债

一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。...区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。昂，举个栗子。我之前在糖果屋微调合集里写过一个副标题悬停显示文章描述对吧？...那如果我换成兄弟相邻选择器的话呢，悬停卡片和显示描述就完全可以分开来写布局了。方便程度和美观程度完全不可同日而语。尤其是我还能用relative定位实现那种悬停显示气泡效果。...还有我以前写过的SAO风格右键菜单，每个二级选项的位置我当初是用的计算公式，在行内样式里通过联立方程组强行计算出偏移量的。这个方案我也写到了butterfly-heo反编译日记里。...换个例子，比如我之前写的SAO风格侧栏卡片，上面有个小小的圆角梯形突起对吧，那个是我用伪类实现的，但是伪类拼接在不同屏幕比下，由于终归是和下面卡片分属两个元素，总是会或多或少出现拼接错位，看着就非常的不美观

6651 0

前端设计开发常用命名规则

Header “header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader). 3....Menu “Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”. 5....[元素类型]-[元素作用/内容] 如:搜索按钮: btn-search 登录表单:form-login 新闻列表:list-news 3.涉及到交互行为的元素命名: 凡涉及交互行为的元素通常会有正常、悬停...、点击和已浏览等不同样式，命名可参考以下规则: 鼠标悬停:：hover 点击：click 已浏览：visited 如:搜索按钮: btn-search、btn-search-hover、btn-search-visited...当前位置导航) 分类命名 id的命名: ---- (1)页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏

3.8K5 0

博客顶栏菜单重写

采用了SAO-UI风格配色新增了手机端侧栏（可开关）。新增了滑动监测，实现自动隐藏。简化魔改内容，前置教程缩小范围至iconfont inject。...2022-04-14:内测版v0.02 采用iconfont图标，整合微调合集内三个魔改方案时间栏翻转显示副标题，悬停显示描述将悬停描述样式改为SAO-notify 适配夜间模式配色笨蛋贰猹，首页卡片都没扒走...2022-04-13:内测版v0.01 重写顶栏菜单UI布局demo 编写新版样式，初步完成交互逻辑调整配色修复与原顶栏菜单的样式冲突新增和风天气插件新增顶栏中央时间新增新版顶栏菜单横向滚动监测...改用悬停或者点击逻辑（最后发现悬停逻辑交互过于频繁，误触概率也很高，所以采用了点击交互逻辑）这次的顶栏因为涉及到了#nav的修改，而main.js中，关于原生顶栏的自适应部分是有相关代码的，所以弃用#...在中新增配置项以控制手机端是否需要启用侧栏展开的菜单，事实上本帖设计的方案自适应良好，可以满足手机端的使用。所以我更建议关闭他。

1.2K3 0

在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

了解Mockplus的用户会知道，该原型工具目前并不直接支持鼠标悬停功能。...但我经过尝试，发现想用它实现一个鼠标悬停事件并不是什么难事，比如网页设计中很常见的鼠标悬停时菜单下拉的效果，只要换个思路，利用Mockplus的状态交互功能，就能轻松实现。...其中一个作为菜单的显示区域（图中蓝色矩形），另外几个拼接起来作为菜单的内容。在右侧参数面板中，将第一个矩形设置为不可见。然后将另外几个矩形合并为组。 ?...第三步：利用状态交互，实现鼠标悬停时菜单下拉的效果。在界面右侧的参数面板上，将透明度设置为0，并点击“透明度”前的小闪电。选择“鼠标经过时”，透明度设置为100。 ?...这样，一个简单的鼠标悬停下拉菜单就做好了。点击界面上方的“预览”，即可查看效果： ? 这就是原型设计的奇妙之处：用有限的条件创造出无限的效果。正如弹钢琴，琴键有限，音乐却是无限的。

3.3K6 0

腾讯地图 - 关键词输入提示（结尾附视频）

开发文档入口滑动到上方菜单的开发文档 -> 选择服务端下的WebService API： [watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYyODYwMg...14178584199053362783", "title": "中关村", "address": "北京市海淀区", "category": "地名地址:热点区域...本例使用最简的jquery-ui来实现autocomplete效果，下载地址为：http://jqueryui.com/download/。 1....基础界面首先构建一个基础界面，创建一个文本框，并依照jquery-ui的用法进行绑定。 jquery-ui文件-->

1.4K3 0

iOS开发技巧篇

第四步：打开需要真机测试的项目插上手机（Xcode第一次链接手机会很慢，可以选择Xcode菜单栏中的 window-> devices查看手机是否准备就绪了），选择项目文件-> General - >...2，Xcode截屏 Xcode默认提供了截屏功能，在 Xcode的 debug菜单中找到viewDebugging，然后点击截屏选项，就可以将截屏的屏幕保存到桌面了。 ?...，于是需要在将要进入横屏时禁用侧滑返回手势，退出横屏时再开启即可。...当 UITableView 的 style 属性设置为 Plain 时，这个tableview的section header在滚动时会默认悬停在界面顶端。...而有时候则需要不悬停的效果，怎么做呢？只需要重载scrollview的delegate方法即可。

2.3K9 0

一、首页、详情页、文章编辑页制作《iVX低代码无代码个人博客制作》

一、首页制作首页预览如下：首先在博客页创建一个相对应项目：接着选择前台，创建一个页面，命名为首页：接着更改当前屏幕为小屏尺寸：接着我们分析这个标题头部，分为左右两侧，左边为一个...logo（红色）区域，右侧为一个头像区域：那么此时创建一个行命名为标题，在这个行内创建两个行，一个命名为左一个命名为右：在此需要设置左右两行的高度为包裹，并且为了使者两行能够同时在一行上显示...最后再往右侧添加一个图片，设置其大小圆角即可：二、内容设置由于我们的页面还需要显示在PC端，那么此时我们还需要添加一个行，命名为主要内容，设置主要内容的宽度为60%，这样整个页面才能更好的显示在 PC 端，否则内容太宽不利于用户使用...接着添加多个文本设置内边距即可：要实现这一步还需要使导航的自动换行关闭：三、导航内容制作广告区域就很简单了，设置一个行命名为广告，给予高度后添加轮播组件即可：轮播组件在扩展组件中：...四、内容区域创建接着创建一个内容区域，命名为博文内容：博文内容需要使用裁剪垂直方向，因为内容过多时，可以使整个区域发生拖动效果，并且高度需要设置为撑开：接着添加一个行，命名为内容，用于存放文章信息

1.3K2 0

Xcelsius（水晶易表）系列6——统计图钻取功能

这种交互方式在前几篇的案例中均有讲解，第一篇中的标签式菜单通过通过设定数据源以及数据插入位置，某种程度上具有钻取功能（只是标签式菜单本事就是作为选择器，并不展示任何数据信息）。...案例数据如下：（因为太宽了，所以左转了90度，否则会被压扁看不清楚）。 ?...开启向下钻取：这一步是至关重要的一步,在饼图属性菜单的向下钻取菜单项下，设置菜单格式如下： ? 勾选启用向下钻取复选框之后，在下面的插入类型中选择按行插入。...组合图设置：在部件菜单中统计图中选择组合图并插入画布，双击打开属性菜单，这里标题设置为A2单元格（A2也是钻取过的动态数据），副标题可以自拟，组合图数据需要按照序列添加（应该记得前一篇的簇状柱形图也是按照序列添加的...插入柱形图，双击打开属性菜单。 ?

2K7 0

打造视觉和交互的极致体验：样式优化与动态效果实现

图片网格的缩放动态每当用户将鼠标悬停在图片上，略微的放大效果便能让图片在界面中更显生动。这种小幅度的缩放不仅增加了页面的层次感，也极大地提升了用户与界面交互时的舒适性。...例如，在用户将鼠标悬停于图片上时，通过动态调整透明度，使图片名称缓缓浮现于视野中。这种视觉上的渐入式呈现，既不过分抢眼，又能在恰当时机传递信息。....当用户悬停时，透明度渐变为 1，文字出现的过程平滑自然。而文字背景的半透明黑色，与图片形成鲜明对比，既不喧宾夺主，又保留了信息传递的清晰性。...右键菜单与弹窗：交互体验的强化在多功能图片库中，右键菜单的存在是不可或缺的交互功能之一。当用户点击右键，菜单以绝对定位的方式精确地出现在鼠标所在位置，提供删除、编辑等快捷操作。...而通过监听 window 的 click 事件，当用户点击界面其他区域时，菜单会自动消失，避免干扰。

5410 0

html、css 实现二级菜单「建议收藏」

border-box; 每一个html元素，都可以看作一个盒子：以我给的这个图为例，1536 × 40 ，1536为width，40为height （默认情况下，height、width决定的区域...content-box和border-box；前两者加paddding-box是background-clip的取值内容盒 content-box = 内容区（默认情况下，height、width决定的区域...：找祖先元素中第一个定位元素，改元素的填充盒；若找不到，则它的包含块为整个网页（初始化包含块）这样，二级菜单就会相对于其对应的一级菜单的内容盒进行定位了三：实现二级菜单以免篇幅拖沓，本文只给一级菜单的第四个...li元素设计了二级菜单一般，页面上只显示一级菜单，需要点击一级菜单，才会出现相应的二级菜单需要用到伪类:hover 鼠标悬停在元素上时的样式（在html中，我给一级菜单的第四个li元素设置了一个选择器...block; padding: 10px; } 补充一嘴：在css中书写选择器时，比如： nav .topnav>li:hover 选中nav元素下的.topnav元素的子元素li，并且有鼠标悬停在上面

3.1K5 0

界面组件之导航菜单备案

*/ border-width:3px; /*可以有颜色，也可以透明*/ border-color:transparent; } .multi_drop_menu a:hover { /*悬停时文本颜色...*/ color:#fff; /*悬停时背景色*/ } .multi_drop_menu a:active { /*点击时背景变色*/ background:#fff; /*点击时文本变色...li a { /*让链接填充列表项*/ display:block; /*给每个链接添加一个右边框*/ border-right-style:solid; /*背景只出现在内边距区域后面*/...; /*左边与父菜单项对齐*/ left:0; /*顶边与父菜单项底边对齐*/ top:100%; } .multi_drop_menu li:hover > ul { /*父元素悬停时显示...*/ float:none; } .multi_drop_menu.vertical li ul { /*子菜单左边与上一级菜单右边对齐*/ left:100%; /*子菜单顶边与上一级菜单项顶边对齐

2.4K1 0

后台系统设计（上篇：选择）

·在用户与单选按钮交互时，请提供良好视觉反馈，且按钮本身状态提供良好的能供性（默认、悬停、选中和禁用）。...·在用户与复选框交互时，请提供良好视觉反馈，且按钮本身状态提供良好的能供性（默认、悬停、选中、禁用和未全选状态）。讨论：仅有两个互斥的选项（二元）是选择单选按钮还是复选框？...·下拉菜单选项按照某种逻辑顺序排序。例如，按照重要程度或被选择程度（可能性）进行排列。 ·对于大多数操作，当单击菜单或以外区域，菜单应该收起关闭；如果点击的菜单项是多选操作，则菜单应保持打开状态。...超出最大宽度从末尾截断，并添加省略号，鼠标悬停显示全部文本内容。 ? ·如果没有预先选择，使用占位符（灰色文本）进行操作提示。例如：请选择。...·下拉选择器多适用于颜色、日历、日期、时间等内容，若不可输入请将整个区域作为触发区域。

13.7K2 1

Custom Beautify

2020-12-12:内测版v0.04 新增侧栏按钮缩进思路。修改关于阿里图标库引入的一些描述。新增TODO，将阿里图标库symbol引入方案写成外挂标签形式。...important; } 侧栏按钮缩进含Aplayer全局吸底音乐标签伸缩实例点击查看侧栏按钮缩进教程在魔改过程中应该会遇到想要让一个按钮变成侧栏伸缩的形式，不需要它时就所在侧栏里，需要时才弹出...例如我希望id为fixedElement的按钮牢牢固定在右下角，可以定义它的定位属性： hover选择器定义鼠标悬停到该元素上时的样式，例如，我希望鼠标悬停在上述这个id为fixedElement的按钮时...此处以对文字页和侧栏的设置为例：修改[Blogroot]\themes\butterfly\source\css\custom.css。...page-number:hover{ cursor: url('https://cdn.jsdelivr.net/npm/akilar-candyassets/cur/i.cur'),auto; } /* 悬停菜单栏时的鼠标指针

3.5K2 0

关于无障碍设计的七件事

是某个博客发表文章的时候的界面，两个输入区域：一个标题，一个写文章。那么用户需要点击哪个区域来开始写文章呢？ ? 很可惜，这个网站也没有做好。点击蓝色框（下图）以外的区域都不能激活写作区域。 ?...菜单也有可能出现这样的问题。在下面维珍航空的例子中，虽然视觉上非常相似，但是右边的是菜单，左边的是非模态对话框。 ? 菜单是一个为用户提供选择列表的小组件。...一旦变成在菜单的每行提供多个选项，如上图左边的例子所示，这就不是菜单了。键盘交互模型从使用箭头键更改为使用Tab键。它会更改键盘焦点的处理方式以及下拉菜单关闭后的位置。...如果是那种需要鼠标悬停在上面才会出现的链接呢？应该告诉Dragon怎么办呢？应该做到在有链接的空白区域旁边显示数字。 ? 下图是领英的?。这是我个人主页的截屏。 ?...当用户的鼠标悬停在一行时，会出现四个可操作的图标。 ? 在这个例子中，怎么始终显示四个图标呢？一种方案就是，它们在白色背景上可以是绿色，在鼠标悬停时颜色反过来。 ? 这个解决方案也可能会被称为“重”。

4.2K3 0

JavaScript 实现自定义鼠标右键上下文菜单

例如，当用户在页面的某个特定区域点击右键时，我们可以通过监听 contextmenu 事件，根据该区域的功能特点显示与之相关的自定义菜单。...一个典型的自定义右键菜单可以由一个容器元素（如）包裹，内部包含多个菜单项（）。...我们可以设置菜单的背景颜色、边框、字体样式、鼠标悬停效果等。...ul元素去掉了默认的列表样式，li元素设置了内边距和鼠标悬停效果。（三）JavaScript 代码最后，编写 JavaScript 代码来处理 contextmenu 事件和显示菜单。...比如，用户可以选择某个图像区域后，在右键菜单中选择“裁剪”、“旋转”、“调整色彩”等操作。还可以根据图像的状态提供不同的选项，如在图像处于选中状态时显示“复制图层”、“锁定图层”等。

1.5K1 0

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

只要明确页面下方的折叠区域有更多相关的信息，用户就会向下滚动页面。 7. 网站应该提供用户一个强大的视觉指示器，用于滚动页面和查看是否有更多的内容。 8....当用户拿着平板电脑时，大拇指最容易接触到的地方是屏幕的两侧和底部。 25. 除了正常的网页滚动，其他任何地方都不需要设计垂直滑动。 26....移动端导航设计：显示最常用的选项，并将其他选项隐藏在汉堡包菜单下。 36. 桌面端的汉堡菜单使用场景较少，因为它并不是非常引人注目，用户也不熟悉，增加了交互成本，减少了信息的呈现。 37....对于手机的辅助导航，可以使用分类登录页面、子菜单或页面内菜单。 38. 菜单下拉列表应该是垂直的，而不是水平悬停，因为水平滚动要困难得多。 39....Megamenus菜单的设计应该比网页更窄，用户才能很轻松地“点击”菜单。 40. 如果使用megamenus菜单，需要将链接整理成组，并区分可点击和不可点击项。 41.

2.3K3 0

AngularDart Material Design 菜单顶

MaterialMenuComponent Selector: 材质菜单基于MenuModel对象呈现菜单。...单击按钮时菜单会扩展，当选择项目或单击下拉菜单外的区域时，菜单会关闭。 Inputs: ariaLabel String 按钮触发器的Aria标签。...closeMenuOnClick bool 如果为true，则在菜单打开时单击触发按钮将关闭材质菜单。否则，在菜单已打开时单击触发按钮将不会执行任何操作。...disabled bool 菜单是否被禁用。 isExpanded bool 菜单是否开放打开。...Inputs: menuItem MenuItem MenuItem，用于定义此菜单的外观和行为。如果项目具有没有空项目组的子菜单，则会通过单击或悬停显示菜单。

2.7K2 0

点击加载更多

导航设计的15个原则

响应式设计进阶：不同屏幕尺寸下的交互优化方案

SAO UI Plan -- Ranklist

4月7日星期四晴论技术负债

前端设计开发常用命名规则

博客顶栏菜单重写

在Mockplus中，如何做鼠标悬停时菜单下拉的效果？

腾讯地图 - 关键词输入提示（结尾附视频）

iOS开发技巧篇

一、首页、详情页、文章编辑页制作《iVX低代码无代码个人博客制作》

Xcelsius（水晶易表）系列6——统计图钻取功能

打造视觉和交互的极致体验：样式优化与动态效果实现

html、css 实现二级菜单「建议收藏」

界面组件之导航菜单备案

后台系统设计（上篇：选择）

Custom Beautify

关于无障碍设计的七件事

JavaScript 实现自定义鼠标右键上下文菜单

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

AngularDart Material Design 菜单顶

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐