在 Javascript 中复制下拉菜单行为

发布于 2024-11-24 09:39:06 字数 421 浏览 2 评论 0原文

我注意到 OS X 中下拉菜单的一件事是它们处理转换到子菜单的方式。当您打开一个菜单并且想要从中打开子菜单时,只要指针位于从菜单侧面延伸的特定锥形区域内,子菜单就会保持打开状态。如果鼠标离开该区域,则菜单将立即关闭,但当鼠标位于该圆锥体中时,菜单将永远关闭。这还允许您沿着对角线路径移动鼠标以到达子菜单中的元素。

另一方面,除非您小心地沿一系列直线路径移动鼠标以到达子菜单项,否则大多数网站上的子菜单都会关闭。在设计更好的网站上(谷歌文档这样做,其他网站也这样做),菜单关闭之前有一个延迟,这解决了整个对角路径问题,但使界面看起来没有响应。

有没有办法在 Web 菜单中复制 OS X 行为?我对一些深奥的技术不太熟悉。我正在考虑手动添加圆锥区域(作为透明图像或其他东西)并在该区域上使用 mousein 和 mouseout 来处理显示和隐藏的事情菜单。但我不太确定该怎么做。

One of the things I've noticed about dropdown menus in OS X is the way they deal with transitioning to a submenu. When you have a menu open and you want to open a submenu from it, the submenu stays open as long as the pointer is located within a certain cone-shaped region extending from the side of the menu. If the mouse leaves this region then the menu will close immediately, but while the mouse is in that cone then the menu will never close. This also allows you to move your mouse along a diagonal path to reach an element in the submenu.

On the other hand, submenus on most websites will close unless you carefully move the mouse along a series of straight line paths to reach a submenu item. On better designed websites (Google docs does this, as do others), there is a delay before the menu closes which takes care of the whole diagonal path issue, but makes the interface seem unresponsive.

Is there a way to replicate the OS X behavior in a web menu? I'm not really familiar with some of the more esoteric techniques. I was thinking something along the lines of manually adding in the cone-region (as a transparent image or something) and using mousein and mouseout on that region to handler showing and hiding the menu. I'm not really sure how to go about that though.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

简单爱 2024-12-01 09:39:06

如果我很好地理解你的问题...检查一下:

演示菜单

这有帮助吗?

If I understood well your question... Check this:

DEMO MENU

Could this help?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文