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

问题

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!

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>

回答1:

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.

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
});

来源：https://stackoverflow.com/questions/22494530/getting-jquery-mmenu-to-display-in-normal-doc-flow-above-768px

标签

javascript

jquery

mmenu