Icon panels introduction

When opening a submenu, it will completely cover it's parent panel. To always have a small part of the parent panel visible (most commonly when you're using icons), include the "iconPanels" add-on .js and .css files and use the iconPanels 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.iconpanels.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.iconpanels.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            iconPanels: {
               // icon panels options
            }
         });
      });
   </script>

Example

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

  • Show a small part of the parent panel.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "iconPanels" add-on

Option Default value Datatype Description
iconPanels A map of options, true for iconPanels.add or a number for iconPanels.visible.
{
add false Boolean Whether or not a small part of parent panels should be visible.
visible 3 Number The number of visible parent panels.
}

Configuration for the "iconPanels" add-on

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

API methods for the "iconPanels" add-on

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

SCSS variables for the "iconPanels" 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_iconpanelWidth $mm_btnSize 1 CSS value The width of the visible part of a panel.
Dependencies:
  • Core (on-canvas).
Works great with:
Incompattible with:
  • Fixed dividers from the dividers add-on.

Next add-on:
Keyboard navigation