🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The Menu Level jQuery plugin generates an accessible, semantic, mobile-friendly, smoothly sliding drill down navigation menu from a nested nav list.

Drill-Down-Menu

Documentation

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

$('.nav').menuLevel();

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)

You May Also Like