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"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <script src="path/to/jquery.mmenu.searchfield.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.searchfield.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 fixed searchfield to the menu.
  • Append a fixed footer to the menu.
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Options

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

<script>
   $(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>
   $(document).ready(function() {
      $("#nav").mmenu({
         // options
      }, {
         // configuration
         searchfield: {

         }
      });
   });
</script>

API methods

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

CSS & SCSS variables

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

Available add-ons

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

Deprecated There is a new, improved version available. Check it out on mmenujs.com

Get the new version No thanks