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"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <script src="path/to/jquery.mmenu.iconpanels.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.iconpanels.css" rel="stylesheet" />
   <script>
      $(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>
   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.
blockPanel true Boolean Whether or not to block the parent panels from interaction. If set to true, the parent panels will be faded out to imply a disabled state.
hideDivider false Boolean Whether or not to hide dividers in parent panels, showing only the listitems.
hideNavbar true Boolean Whether or not to hide navbars in parent panels, showing only the listviews.
visible 3 Number The number of visible parent panels (max 3).
Set to "first" to always keep a part of (only) the first panel visible
}

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.

CSS variables for the "iconPanels" add-on

Variable Default value Datatype Description
Sizes
--mm-iconpanel-size $mm_iconpanelSize CSS value The width of the visible part, in pixels.

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.
Include CSS
$mm_opt_iconpanels true Boolean Whether or not to include CSS for the iconPanels add-on throughout the entire CSS framework.
$mm_opt_iconpanels_blocker $mm_opt_iconpanels Boolean Whether or not to include CSS for the iconPanels blocker throughout the entire CSS framework.
Sizes
$mm_iconpanelSize $mm_btnSize 1 CSS value The width of the visible part, in pixels.
Dependencies:
  • Core (on-canvas).
Works great with:

Next add-on:
Keyboard navigation