javascript - 如何为移动设备使用不同的菜单 - Shopify (mmenu)

Question

我开始在 Shopify 商店工作。之前的开发者使用 mmenu 创建移动菜单。

我想为移动和桌面使用不同的菜单，问题是，如何控制 mmenu 显示哪个菜单？

谢谢

Answer 1

首先，您需要确保使用以下选项克隆菜单（因为插件对 html 进行了很多更改）：

$("#my-menu").mmenu({
   // options
}, {
   // configuration
   clone: true
});

然后你需要添加基于 id 的 css（前置 mm-）以显示原始或克隆。

@media (max-width: 600px) {
   #my-menu {
      display: none !important;
   }
}
@media (min-width: 601px) {
   #mm-my-menu{
      display: none !important;
   }
}

这是实际的文档