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"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.tileview.css" rel="stylesheet" />
   <script>
      $(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>
   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.

CSS variables for the "tileview" extension

The "tileview" extension has no CSS variables.

SCSS variables for the "tileview" extension

Variable	Default value	Datatype	Description
Include CSS
$mm_opt_tileview	`true`	Boolean	Whether or not to include CSS for the tileview extension throughout the entire CSS framework.
$mm_opt_tileview_xs	`$mm_opt_tileview`	Boolean	Whether or not to include CSS for size XS tile throughout the entire CSS framework.
$mm_opt_tileview_s	`$mm_opt_tileview`	Boolean	Whether or not to include CSS for size S tile throughout the entire CSS framework.
$mm_opt_tileview_m	`$mm_opt_tileview`	Boolean	Whether or not to include CSS for size M tile throughout the entire CSS framework.
$mm_opt_tileview_l	`$mm_opt_tileview`	Boolean	Whether or not to include CSS for size L tile throughout the entire CSS framework.
$mm_opt_tileview_xl	`$mm_opt_tileview`	Boolean	Whether or not to include CSS for size XL tile throughout the entire CSS framework.

Tileview introduction

Example

Available tile-sizes

CSS variables for the "tileview" extension

SCSS variables for the "tileview" extension

Compatibility

Dependencies:

Incompattible with: