带有“动态点击区域”的菜单

弹出式菜单！当您需要实现使用悬停事件来显示更多菜单项的菜单时，您就进入了一个棘手的领域。首先，它们也应该适用于点击和轻触。如果没有，您就破坏了没有鼠标的任何人的菜单。但这并不意味着您不能也使用:hover。当您使用悬停状态来显示更多内容时，这意味着非悬停状态需要隐藏它们。问题就在这里。

问题在于，如果子菜单在悬停时弹出到某个位置，将鼠标移到它上面可能需要沿着一条相当狭窄的走廊移动。不小心移到该区域之外，菜单可能会关闭，这会是一个非常令人沮丧的UX时刻。

我们之前在我们的“具有更宽容鼠标移动路径的下拉菜单”文章中介绍过这一点。

解决此问题的最引人注目的示例是那些涉及额外隐藏“点击区域”的示例。亚马逊不再使用这种菜单（我能看到的），也许这就是原因之一。但过去，他们使用了这种点击区域技术。我们可以称之为“动态点击区域”，因为它们是根据父元素和子菜单的位置绘制的。

我最近没有看到很多这种实现，但最近，Hakim El Hattab 在他在CSS Day 2019上的演讲中包含了这种技术的现代实现。这种实现利用SVG动态绘制区域。您实际上看不到点击区域，但它们确实看起来像这样，从而形成了防止悬停消失的路径。

我会在这里包含从该点开始的演讲的 YouTube 嵌入内容

他绘制点击区域的方式非常漂亮，让我非常开心

它的实时演示已在Slides.com 模式库上。