在上个月，我发布过一期教程：在 Dawn 等一系列 Shopify 官方推出的主题中添加超级菜单功能，支持在 Header 菜单中添加图片

今天群里又有人问到，如何在鼠标悬浮到菜单上时展示超级菜单，其实之前就有人问过，于是，我今天抽空做了这个功能。实际上这两个功能都是被问过挺多次，却是在某种机缘下，才下定决心花时间去解决的。

为什么官方不做？

不知道你有没有这样的感觉，在我看来超级菜单（Mega Menu）现在应该是一个主题的标配，从 Shopify Dawn 的更新日志也可以看出，距离它 2021 年发布到现在，已经快两年了。

但官方一直没有做这个功能，或许是觉得做了的话，花 $300+（折合成人民币两千多）去买主题商店那些付费主题的人就会少很多吧。除了这个考量，实在没理由快两年了还不做这个功能。

效果预览

这次直接在上一期超级菜单的基础上添加代码实现，点击查看效果预览，可以亲自尝试一下，鼠标放上去和移开，超级菜单会自动显示和隐藏。

实现原理

简单来讲就是通过 JavaScript 添加事件监听，① 当鼠标悬浮到菜单标题上时展示菜单内容，② 切换菜单时显示对应的内容，切回来也自动更新，而不应该出现第二个菜单内容覆盖第一个菜单内容的现象，以及 ③ 鼠标离开 Header 时隐藏超级菜单

代码复制

此部分原创代码适用于 Dawn, Sense, Craft 等一揽子 Shopify 主题，同时，增强版主题新发布的版本也已添加此功能，已经购买的店铺可以直接下载新版。

现在 Shopify 官方对于主题版权的审查越来越严格，如果你还在用盗版的付费主题，可以迁移到增强版主题。

接下来讲解具体实现原理和代码：