Listview introduction

By default, all listviews in a menu will have basic styling. If you want to add some more detailed styling to the listviews, include the "listview" extension .css file and add the listview style 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.listview.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["listview-justified"]
         });
      });
   </script>

Or add the related classname to a menu item.

<body>
   <nav id="my-menu">
      <ul>
         <li class="Spacer"><a href="#">Home</a></li>

Example

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

  • Don't change menu items.
  • Make menu items larger.
  • Vertically justify the menu items.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Available styles

listview-small
Makes the menu items narrow.
listview-large
Makes the menu items larger.
listview-huge
Makes the menu items really large.
listview-justify
Makes the menu items vertically justified.

SCSS variables for the "listview" 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_listitemSmallPadding $mm_listitemPadding*0.7 1 CSS value The padding for small menu items.
$mm_listitemLargePadding $mm_listitemPadding*1.5 1 CSS value The padding for large menu items.
$mm_listitemSmallPadding $mm_listitemPadding*2 1 CSS value The padding for huge menu items.

Configuration for the "listview" extension

The "listview" extension uses values in the classNames option.

Option Default value Datatype Description
className
{
divider "Divider" String The classname on a LI that should be displayed as a divider.
inset "Inset" String The classname on a submenu (a nested UL) that should be displayed as a default list.
spacer "Spacer" String The classname on a LI that should be displayed with more whitespace above it.
}
Dependencies:
  • Core (on-canvas).
Incompattible with:
  • Vertical submenus (when using justified listviews);
  • The tileview extension.

Next extension:
Multiline