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>

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.

Dependencies:
  • Core (on-canvas).
Incompattible with:

Next extension:
Widescreen