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>
Give it a go, change the options below and see how it affects the menu in the example on the right.
<script> jQuery(document).ready(function( $ ) { }); </script>
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
mm-tileview-s
mm-tileview-l
mm-tileview-xl
The "tileview" extension has no CSS variables.
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. |