Dividers introduction

To automatically add dividers, to enable dividers to be fixed or to enable dividers to collapse the subsequent menu items, include the "dividers" add-on .js and .css files and use the dividers options.

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

Learn how to manually setup a divider in this tutorial.

Example

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

  • Automatically add dividers.
  • Make the dividers fixed.
  • Works great with:
  • Prepend a searchfield to the menu.
  • Add a section indexer to the menu.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "dividers" add-on

Option Default value Datatype Description
dividers A map of options or true for dividers.add and dividers.fixed.
{
add false Boolean Whether or not to automatically add dividers to the menu (dividing the menu items alphabetically).
addTo "panels" String Where to add the dividers.
Possible values: "panels" and a valid jQuery selector.
collapse false Boolean Whether or not to collapse all subsequent menu items that have the classname specified in classNames.dividers.collapsed in the configuration object.
fixed false Boolean Whether or not to keep the divider of the currently viewed section fixed at the top.
}

Configuration for the "dividers" add-on

The "dividers" add-on has no configuration options, it does add an object to the classNames option.

$.mmenu.configuration.classNames.dividers = {
   collapsed: "Collapsed"
};

API methods for the "dividers" add-on

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

SCSS variables for the "dividers" add-on

Variable Default value Datatype Description
1 For the actual value, the datatype and a description, have a look at the default variable values reference.
$mm_dividerFontSize 10px CSS value The font-size of dividers in the menu.
$mm_dividerHeight ($mm_btnSize/2)+($mm_padding/2) 1 CSS value The height of dividers in the menu.
Dependencies:
  • Core (on-canvas);
  • The listview extension.
Works great with:
Incompattible with:
  • The slidingSubmenus options set to false.

Next add-on:
Drag