Counters introduction

To append a counter to the menu items that have a submenu, include the "counters" add-on .js and .css files and use the counters options.

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

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.
  • Works great with:
  • Prepend a fixed searchfield to the menu. 
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "counters" add-on

Option Default value Datatype Description
counters A map of options or true for counters.add and counters.count.
{
add false Boolean Whether or not to automatically append a counter to each menu item that has a submenu.
addTo "panels" String Where to add the counters.
Possible values: "panels" and a valid jQuery selector.
count false Boolean Whether or not to automatically count the number of items in the submenu.
}

Configuration for the "counters" add-on

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

$.mmenu.configuration.classNames.counters = {
   counter: "Counter"
};

API methods for the "counters" add-on

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

CSS variables for the "counters" add-on

The "counters" add-on has no CSS variables.

SCSS variables for the "counters" 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.
Include CSS
$mm_opt_counters true Boolean Whether or not to include CSS for the counters add-on throughout the entire CSS framework.
Sizes
$mm_counterWidth $mm_btnSize 1 CSS value The width of counters.

Compatibility

Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Dividers