【问题标题】:Auto-dropped Dropdown Menu, what is it called?自动下拉菜单,它叫什么?
【发布时间】:2013-08-18 10:58:42
【问题描述】:

Amazon's website 说明:

在“按部门购物”下-

无需“悬停”的下拉式下拉菜单。 但是,当浏览器不是全屏时,菜单会消失,您需要悬停菜单才能显示下拉菜单。

它的正式名称是什么?

【问题讨论】:

  • 无论是否默认打开,仍然是一个下拉菜单
  • 这个问题似乎离题了,因为它是关于术语而不是技术问题。
  • 他们应该把这个问题放在哪里?

标签: jquery css menu


【解决方案1】:

我会说这是一个下拉菜单,当视口足够大以容纳它时,它被设置为始终可见。我不认为这是一种经常使用或特别的网页设计模式,它真的需要它自己的名字。我经常将大多数现代响应式网站(在手机或小屏幕上查看时)上的小下拉菜单称为移动菜单。但这只是因为它们是移动设备上的菜单状态...

【讨论】:

  • 我忘了问,“按部门购物”中使用的技术是什么?是 CSS 悬停还是 Jquery 插件?又如何知道其中的区别?
  • 这很可能只用 CSS 创建。但是很多人在这些场景中使用 jQuery。如果您试图让屏幕阅读器可以看到您的菜单,这会变得有点混乱。如果您使用 jQuery .hide() 或 .fadeOut() 方法“隐藏”子菜单 - 这会将 ul 设置为不显示。我的建议是完全重新考虑您对此类菜单的需求。首先建立一个移动网站将真正帮助您缩小真正重要的范围。很有可能有比这更直观的方式来浏览您的网站。
【解决方案2】:

Amazon 下拉菜单(更具体地说是 Mega-dropdown)已在此处https://github.com/kamens/jQuery-menu-aim 进行了逆向工程,您可以在此处阅读更多信息。 http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

在光标的每个位置,您都可以在光标之间画一个三角形 当前鼠标位置和右上角和右下角 下拉式菜单。如果下一个鼠标位置在该三角形内,则 用户可能正在将光标移动到当前显示的 子菜单。亚马逊使用它来获得很好的效果。只要光标 停留在该蓝色三角形内,当前子菜单将保持打开状态。它 光标悬停在“Appstore for Android”上无关紧要 瞬间——用户可能正朝着“了解更多关于 云驱动器。”

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-27
    • 2019-11-11
    • 1970-01-01
    相关资源
    最近更新 更多