To prepend one or multiple fixed navigational bars to the menu,
include the "navbars" add-on .js and .css files and use the navbars
options.
<head> <script src="path/to/jquery.js"></script> <script src="path/to/jquery.mmenu.js"></script> <script src="path/to/jquery.mmenu.navbars.js"></script> <link href="path/to/jquery.mmenu.css" rel="stylesheet" /> <link href="path/to/jquery.mmenu.navbars.css" rel="stylesheet" /> <script> $(document).ready(function() { $("#my-menu").mmenu({ navbars: [{ // first navbar options }, { // second navbar options }] }); }); </script>
A menu can have up to 8 navbars (4 positioned at the top and 4 positioned at the bottom).
A navbar can contain a back-, next- and close button, a title, breadcrumbs, a searchfield, a range of buttons (like tabs), custom content or any combination thereof.
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>
Option | Default value | Datatype | Description |
1 See the description. | |||
navbars | An array of navbar objects,
a single navbar object or
true for a single default navbar. |
||
[ | |||
{ | |||
content | null 1 |
Array | An array of strings (for text or HTML), jQuery objects or the keywords: "breadcrumbs", "close", "next", "prev", "searchfield", "title". If omitted, a fully styled and functional navbar with a title and back button will be created. |
height | 1 |
Number | The size of the navbar, will be multiplied bij 40px (the CSS variable --mm-navbar-height ).Any number higher than 1 will decrease the maximum number of navbars with the same amount. |
position | "top" |
String | The position for the navbar. Possible values: "top" and "bottom" . |
type | null |
String | The type of navbar. Set to "tabs" to make all anchors in the navbar behave like tabs. |
} | |||
{ ... } |
|
Object | Second navbar object. |
{ ... } |
|
Object | Third navbar object. |
} |
Option | Default value | Datatype | Description |
navbars | |||
{ | |||
breadcrumbs | |||
{ | |||
separator | "/" |
String | The separator between two breadcrumbs. |
removeFirst | false |
Boolean | Whether or not to remove the first breadcrumb. |
} | |||
} |
The "navbars" add-on also adds an object to the classNames
option.
$.mmenu.configuration.classNames.navbars = { panelTitle : "Title", panelNext : "Next", panelPrev : "Prev" };
The "navbars" add-on has no API methods.
The "navbars" add-on has no CSS variables.
Variable | Default value | Datatype | Description |
1 For the actual value, the datatype and a description, have a look at the default variable values reference. | |||
Include CSS | |||
$mm_opt_navbars | true |
Boolean | Whether or not to include CSS for the navbars add-on throughout the entire CSS framework. |
$mm_opt_navbars_top | $mm_opt_navbars |
Boolean | Whether or not to include CSS for the navbars positioned at the top throughout the entire CSS framework. |
$mm_opt_navbars_bottom | $mm_opt_navbars |
Boolean | Whether or not to include CSS for the navbars positioned at the bottom throughout the entire CSS framework. |
$mm_opt_navbars_breadcrumbs | $mm_opt_navbars |
Boolean | Whether or not to include CSS for the navbars breadcrumbs throughout the entire CSS framework. |
$mm_opt_navbars_tabs | $mm_opt_navbars |
Boolean | Whether or not to include CSS for the type tabs navbars throughout the entire CSS framework. |
Next add-on:
Page scroll