Fullscreen introduction

By default, the menu will fill up 80% of the available width (or height when opened from the top/bottom), with a min-width of 140px and a max-width of 440px (140px/880px when opened from the top/bottom). If you want it to fill up 100%, include the "fullscreen" extension .css file and add "fullscreen" 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.fullscreen.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["fullscreen"]
         });
      });
   </script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Open the menu in fullscreen.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
Works great with:
  • The "close" content from the navbars add-on.
Incompattible with:

SCSS variables for the "fullscreen" extension

The "fullscreen" extension has no SCSS variables.

Next extension:
Iconbar