jQuery Menu Level
An accessible multi-level navigation for mobile.
Features
- IE11+
- ARIA
- Back button
- A clone link of the parent link can be created inside de sublevel.
Markup
<script src="jquery.menu-level.js"></script>
<nav class="nav" role="navigation"> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li> <a href="#">Lorem ipsum</a> <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> </ul> </li> </ul> </nav>
Theme
menu-level.scss
JavaScript
Options
Options | Type | Description | Default |
prefix | string | Classes prefix | 'mlvl' |
sublevel | string | CSS Selector for sublevel | 'ul ul' |
repeatParentInSub | bool | Create a button to go back in sublevels | true |
backLabel | bool or string | Back button's label | 'parent' ('parent' or string) |
backAriaLabel | string | Back button's aria label | 'Retour' |
onNav | method | Execute code after a level change | function() {} |
Events
Events | Description |
go-to-first-panel.mlvl | Hide all sublevels |
destroy.mlvl | Remove plugin |
show.mlvl | Show the sublevel (Apply to sublevels) |
hide.mlvl | Hide the sublevel (Apply to sublevels) |