Auto height introduction

By default, a menu opened from the top/bottom will fill up 80% of the available height. To automatically measure the height, include the "autoHeight" add-on .js and .css files and use the autoHeight options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.autoheight.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.autoheight.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            autoHeight: {
               // auto height options
            }
         });
      });
   </script>

Example

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

  • Automatically measure the menu height.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "autoHeight" add-on

Option Default value Datatype Description
autoHeight A map of options or true for autoHeight.height = "auto".
{
height "default" String What type of height to use.
Possible values: "default", "auto" or "highest".
}

Configuration for the "autoHeight" add-on

The "autoHeight" add-on has no configuration options.

API methods for the "autoHeight" add-on

The "autoHeight" add-on has no API methods.

SCSS variables for the "autoHeight" add-on

The "autoHeight" add-on has no SCSS variables.

Dependencies:
  • Core (on-canvas + off-canvas).
Incompattible with:
  • The offCanvas.position option set to "left" or "right".

Next add-on:
Back button