Section indexer introduction

To append a section indexer to the menu, include the "sectionIndexer" add-on .js and .css files and use the sectionIndexer 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.sectionindexer.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.sectionindexer.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            sectionIndexer: {
               // section indexer options
            }
         });
      });
   </script>

Example

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

  • Add a section indexer to the menu.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
  • Core (on-canvas);
  • The dividers add-on.
Incompattible with:

Options for the "sectionIndexer" add-on

Option Default value Datatype Description
sectionIndexer A map of options or true for sectionIndexer.add.
{
add false Boolean Whether or not to automatically append a section indexer to the menu.
addTo "panels" String Where to add the section indexer(s).
Possible values: "panels" and a valid jQuery selector.
}

Configuration for the "sectionIndexer" add-on

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

API methods for the "sectionIndexer" add-on

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

SCSS variables for the "sectionIndexer" 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_sectionIndexerWidth $mm_padding*2 1 CSS value The width of the section indexer.

SCSS mixins for the "sectionIndexer" add-on

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors_sectionindexer Include this mixin to create a custom color scheme for the "sectionIndexer" add-on.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$textColor $mm_dimmedTextColor 2 The color for text in the section indexer.
)

Next add-on:
Set selected