Tileview introduction

By default, all lists will automatically be styled like a listview. If you want the lists to be styled like a tileview, include the "tileview" extension .css file and add "tileview" 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.tileview.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["tileview"]
         });
      });
   </script>

If you want to style only some listviews like a tileview, add the classname "mm-tileview" to the listview.

   <nav id="my-menu">
      <ul class="mm-tileview">
         <li><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.

  • Use a tileview layout.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
  • Core (on-canvas).
Incompattible with:

Available tile-sizes

By default, all tiles will fill up 50% of the available width. Add one of the following classnames to a menu item to change its size.

mm-tileview-xs
Makes the tile fill up 12.5% of the available width.
mm-tileview-s
Makes the tile fill up 25% of the available width.
mm-tileview-l
Makes the tile fill up 75% of the available width.
mm-tileview-xl
Makes the tile fill up 100% of the available width.

SCSS variables for the "tileview" extension

The "tileview" extension has no SCSS variables.

SCSS mixins for the "tileview" extension

The "tileview" extension has no SCSS mixins.

Next extension:
Widescreen