Justified listview introduction

To vertically justify the menu items in a listview, include the "justifiedListview" extension .css file and add "justified-listview" to the extensions option.

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

If you want to justify the menu items of only some panels, add the classname "mm-justified-listview" to the panel.

   <nav id="my-menu">
      <ul class="mm-justified-listview">
         <li><a href="#">Home</a></li>

Note that the "justifiedListview" extension assumes the panels it is applied to have no other content than one listview.

Example

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

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

   });
</script>
Dependencies:
  • Core (on-canvas).
Incompattible with:
  • Vertical submenus;
  • The tileview extension.

SCSS variables for the "justifiedListview" extension

The "justifiedListview" extension has no SCSS variables.

SCSS mixins for the "justifiedListview" extension

The "justifiedListview" extension has no SCSS mixins.

Next extension:
Multiline