Widescreen introduction

If you want the menu to always be opened (most commonly on a wider screen), include the "widescreen" extension .css file (possibly using a media query) and add "widescreen" to the extensions option.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.widescreen.css" type="text/css" rel="stylesheet" 
      media="all and (min-width: 900px)" />

Note that the "widescreen" extension also extends the behavior of the page. When it is included, you are therefor required to have at least one menu with "widescreen" added to the extensions option.

Example

Give it a go, resize the browser to toggle the widescreen extension.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: ["widescreen"]
      });
   });
</script>
Open in a new window

SCSS variables for the "widescreen" extension

The "widescreen" extension has no SCSS variables.

Dependencies:
Incompattible with:
  • The popup extension;
  • The "close" content from the Navbars add-on.
  • The drag add-on (for dragging open the menu).
  • The dropdown add-on.