使jquery菜单显示在正常文档流高于768px

Getting jquery mmenu to display in normal doc flow above 768px

本文关键字：文档 768px 高于 常文档 菜单 jquery 显示      更新时间：2023-09-26

我试图让mmenu显示在正常的文档流时，高于一定的屏幕宽度，并低于该宽度显示，因为它在盒子外。我遇到了一个提到"克隆"的答案，尽管我不确定这意味着什么(它只是用不同的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>

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

请注意，mmenu插件有一个内置的克隆菜单选项，它会自动在菜单中的所有ID前加上"mm-":

$("#menu").mmenu({
   clone: true
});
相关文章：