上面是亚马逊网站的下拉导航菜单,类似于天猫和京东商城。精心开发5年的UI前端框架!
鼠标移上去的效果反应非常迅速,事实上做过这种效果的人都应该知道,一般要做到如此快速的效果,当你从左侧移到右侧的时候是会出问题的。大多数dropdown菜单在鼠标移到菜单项并显示子菜单的时候,都会有一定的延迟效果,下面是old Khan Academy网站的一个例子:
看到那延迟效果了没?其实你是需要这个延迟的,不管是代码上还是审美上,如果没有这个延迟,你从主菜单移到子菜单的瞬间,子菜单会消失掉。这会让用户觉得心里闹得慌,就像下面这样:
那么亚马逊是如何做到在不使用延迟方法的情况下做到避免上述问题的呢?
亚马逊的鼠标移进和移出效果做的非常好,用起来感觉非常容易。为了避免上面的bug,亚马逊对鼠标移动路径代表的用户意图做了一定的分析和预判。精心开发5年的UI前端框架!
如果用户的的指针进入到了蓝色的三角形区域,当前显示出来的子菜单会稍微停留的久一些。
在指针到达的任何地方,你都能画出一个这样的三角形区域,三角形的三个点分别是:指针所在位置、右边子菜单区域的最左上角,右边子菜单区域的最左下角。如果你的指针在这个区域内,用户的意思很可能是继续显示当前的子菜单,而不是切换到其他子菜单,尽管有可能指针已经在另外一下主菜单项的上面。
当然如果指针离开了这个三角形区域,那么就需切换菜单了。精心开发5年的UI前端框架!
所以如果你是一个偏执框,希望自己的dropdown做的非常的酷,我用jQuery写的一个插件也许你可以参考一下,这个插件能识别出用户的这个意图。
插件的叫jQuery-menu-aim可以在github上找到。下面是我用这个插件为new Khan Academy做的菜单效果:
相关推荐
致力于方便快捷的代码开发调用,使代码更简洁漂亮。---一个使用方便的DropDownMenu下拉菜单。
这是一款点击input文本框弹出下拉菜单,选中菜单,支持多选条件,进行搜索的jQuery搜索框下拉菜单选择插件,功能很强大的下拉框搜索代码。 js代码 [removed] var Random = Mock.Random; var json1 =...
简单的下拉菜单几乎可以使用这个简单的插件进行任何操作。 用法 款式: 在您的 html 页面中包含 jquery.dropdown css 文件。 < link href =" jquery.dropdown.css " type =" text/css " rel =" stylesheet " ...
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL...Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮,你点一下就会有一个Dropdown下拉菜单出现,在其他区
Image DropDown是一款用于美化select下拉菜单的jQuery插件。它能为select下拉菜单的每个选项添加一个小图标,并对下拉菜单的界面进行各种美化效果。
下拉菜单-NoJquery 不使用 jQuery 构建下拉菜单该项目在构建下拉菜单时不使用任何 javascript 或 jQuery
jquery.dropdown-jQuery插件 基本用法: 在页面中包含JS和CSS,并调用dropdown jQuery方法来格式化select输入。 $ ( 'select' ) . dropdown ( ) ; 注意:每个select输入必须具有关联的id属性(否则,您将需要...
dropdownmenu一个写好的微信小程序帅选条件框,多条件筛选,下拉菜单,直接引用组件就可以 读懂并灵活运用必须具有html,css ,js基础,除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
jquery.dropdown是一款效果非常炫酷的select下拉菜单美化插件。这款jQuery下拉菜单美化插件能够使菜单选项一各种很炫的动画方式展现出来,其中的一些3d动画使用到了css3 3d动画效果。
Android DropDownMenu下拉菜单,漂亮的样式
jQuery插件,提供了一个简单的下拉按钮菜单(拆分按钮)。 兼容jQuery UI主题。 版权[Christos Pontikis] [版权所有] [版权所有]: ://pontikis.net 需要jquery(> = 1.6),jquery-ui(> = 1.8)。 使用jquery> ...
React下拉选择可自定义的下拉菜单用于做出React特征可通过prop s配置通过渲染道具回调(可访问内部道具,状态和方法),所有内部组件的总自定义组件覆盖可通过CSS(或自定义组件)设置样式门户支持在本地DOM树之外...
主要为大家详细介绍了vue+element搭建后台小总结,el-dropdown下拉功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
css-jquery-dropdown-menu-like-bootstrap css-jquery-dropdown 菜单类似于 bootstrap 下拉菜单样式
dropdown jQuery 带阴影效果折叠菜单 dropdown jQuery 带阴影效果折叠菜单
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
C# winform Combox 下拉菜单 DropDownList 下拉选项空白无法显示文本的解决方案
一个使用方便快捷,调用简单,使代码更简洁优雅的下拉下单。代码可参考博客地址 http://blog.csdn.net/u010053224/article/details/51179251
一个jquery的下拉菜单插件自己写的jquery下拉菜 Dropdown Jquery1.32
下拉菜单是app开发中最常用的内容选择组件,避免用户录入的同时保证了数据准确性。具有优势:1、菜单应该易于打开、关闭和交互;2、菜单内容应适合用户需求;3、菜单项应该易于浏览。下拉菜单可以显示选项列表,由...