Iconbar introduction

To always have a small part of the menu visible (most commonly when you're using icons), include the "iconbar" extension .css file and add "iconbar" to the extensions option.

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

Note that the "iconbar" extension also extends the behavior of the page. When it is included, you are therefor required to have at least one menu with "iconbar" added to the extensions option.

Example

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

  • Keep small part of the menu visible.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
Incompattible with:
  • The offCanvas.position option set to "top", "right" or "bottom";
  • The offCanvas.zposition option set to "front" or "next";
  • The Effects extension (when animating the menu);
  • The drag add-on.

SCSS variables for the "iconbar" extension

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_iconbarWidth $mm_btnSize+($mm_padding*2) 1 CSS value The width of the iconbar.

Next extension:
Listview