Add-ons introduction

Besides the extensions, the jQuery.mmenu plugin also uses add-ons to add additional behavior. These add-ons require additional .js and .css files to be included and options to be set.

<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.searchfield.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.searchfield.css" type="text/css" rel="stylesheet" />

Example

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

  • Append a counter to the menu items.
  • Prepend a fixed header to the menu.
  • Prepend a searchfield to the menu.
  • Append a fixed footer to the menu.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options

Add-ons might have their own set of options grouped in an object in the options.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
         searchfield: {

         }
      });
   });
</script>

Configuration

Add-ons might have their own set of configuration options grouped in an object in the configuration.

<script type="text/javascript">
   $(document).ready(function() {
      $("#nav").mmenu({
         // options
      }, {
         // configuration
         searchfield: {

         }
      });
   });
</script>

API methods

Add-ons might have their own set of API methods.

SCSS variables

Add-ons might have their own set of SCSS variables.

Available add-ons

Auto height Back button Columns Counters Dividers Drag Dropdown Fixed elements Icon panels Keyboard navigation Lazy submenus Navbars Page scroll RTL Searchfield Section indexer Set selected Toggles