让jquery mmenu显示在768px以上的正常doc流程中 [英] Getting jquery mmenu to display in normal doc flow above 768px

问题描述

我正试图让 mmenu 在某个屏幕上方显示正常的文档流程宽度，低于该宽度显示，因为它开箱即用。我找到了一个答案，其中提到了克隆，虽然我不确定这是什么（它只是用不同的ID复制菜单？）...我有一个15页网站的项目，这将是完美的，如果我能按照我的意愿让它工作！任何帮助将不胜感激！

I'm trying to get mmenu to display in normal document flow when above a certain screen width, and below that width display as it does out of the box. I came across an answer where "cloning" was mentioned, though I'm not sure what this entails (is it just duplicating the menu with a different ID?)... I have a project with a 15 page site that this would be perfect for, if I could get it working as I'd like! Any help would be greatly appreciated!

我试过这样包装函数（我的jQuery / javascript绝对不是我的强项！）：

I've tried wrapping the function like so (my jQuery/javascript is most definitely not my strong suit!):

$(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并将其显示在桌面网站中。

Creating a clone (and yes, changing its ID) gives you two NAVs with the same HTML inside it. Fire the plugin on the first NAV and use CSS and media queries to show it in the mobile site. Again use CSS and media queries to hide it in the desktop site. Vice versa use CSS and media queries to hide the first NAV in the mobile site and show it in the desktop site.

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

Note that the mmenu plugin has a build in option for cloning the menu that will automatically prepend all ID's in the menu with "mm-":

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

这篇关于让jquery mmenu显示在768px以上的正常doc流程中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！