Columns introduction

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

Example

Give it a go, click the menu icon in the header to open the menu.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         columns: true
      });
   });
</script>
Open in a new window
Dependencies:
  • Core (on-canvas).
Works great with:
  • All possible values for the offCanvas.position and offCanvas.zposition options;
  • The fullscreen extension.
Incompattible with:

Options for the "columns" add-on

Option Default value Datatype Description
columns A map of options, true for columns.add or a number for columns.visible
{
add false Boolean Whether or not a to split up the panels in multiple columns.
visible A map of options or a number for columns.visible.max and columns.visible.min.
{
max 3 Number The maximum number of visible columns.
min 1 Number The minimum number of visible columns.
}
}

Configuration for the "columns" add-on

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

API methods for the "columns" add-on

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

SCSS variables for the "columns" add-on

The "columns" add-on has no SCSS variables.

SCSS mixins for the "columns" add-on

The "columns" add-on has no SCSS mixins.

Next add-on:
Counters