Question

我试图让mmenu在高于某个屏幕宽度时显示在正常文档流中，并且低于该宽度显示，因为它开箱即用。我找到了答案，其中克隆＆＃34;有人提到了，虽然我不确定这会带来什么（它只是用不同的ID复制菜单？）...我有一个15页的网站项目，如果我能得到的话，这将是完美的它像我一样工作！任何帮助将不胜感激！

我尝试过这样的功能（我的jQuery / javascript绝对不是我的强项！）：

$(document).ready(function($) {
  if($(window).width() < 768) {
        $("#menu").mmenu();
  }
});

HTML：

<nav id="menu">
    <ul>
        <li class="Selected"><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
    </ul>
</nav>

Answer 1

创建克隆（是的，更改其ID）可以为您提供两个内部具有相同HTML的NAV。在第一个NAV上触发插件，并使用CSS和媒体查询在移动站点中显示它。再次使用CSS和媒体查询将其隐藏在桌面站点中。反之亦然，使用CSS和媒体查询隐藏移动站点中的第一个NAV，并将其显示在桌面站点中。

请注意，mmenu插件有一个内置选项，用于克隆菜单，该菜单将自动在菜单中添加“mm - ”所有ID：

$("#menu").mmenu({
   clone: true
});

让jquery mmenu显示在768px以上的正常doc流程中

1 个答案: