Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps infinite nesting of submenu parts.
The HC MobileNav slides out from the left or proper facet of the webpage when toggled and overlaps (or expands) submenus when a guardian menu is opened.
bootstrap sidebar menu with submenu collapse, multi level sidebar menu css, multi level sidebar menu jquery, multi level dropdown menuresponsive
How to make use of it:
Create a multi-level menu from a nested nav list.
<nav id="main-nav"> <ul class="first-nav"> <li class="cryptocurrency"> <a href="#">Cryptocurrency</a> <ul> <li><a href="#">Bitcoin</a></li> <li><a href="#">Ethereum</a></li> <li><a href="#">NEO</a></li> <li><a href="#">ZCash</a></li> <li><a href="#">Dogecoin</a></li> </ul> </li> </ul> <ul class="second-nav"> <li class="devices"> <a>Devices</a> <ul> <li class="mobile"> <a href="#">Mobile Phones</a> <ul> <li><a href="#">Super Smart Phone</a></li> <li><a href="#">Thin Magic Mobile</a></li> <li><a href="#">Performance Crusher</a></li> <li><a href="#">Futuristic Experience</a></li> </ul> </li> <li class="television"> <a href="#">Televisions</a> <ul> <li><a href="#">Flat Superscreen</a></li> <li><a href="#">Gigantic LED</a></li> <li><a href="#">Power Eater</a></li> <li><a href="#"></a><a href="#!">3D</a> Experience</li> <li><a href="#">Classic Comfort</a></li> </ul> </li> <li class="camera"> <a href="#">Cameras</a> <ul> <li><a href="#">Smart Shot</a></li> <li><a href="#">Power Shooter</a></li> <li><a href="#">Easy Photo Maker</a></li> <li><a href="#">Super Pixel</a></li> </ul> </li> </ul> </li> <li class="magazines"> <a href="#">Magazines</a> <ul> <li><a href="#">National Geographic</a></li> <li><a href="#">Scientific American</a></li> <li><a href="#">The Spectator</a></li> <li><a href="#">The Rambler</a></li> <li><a href="#">Physics World</a></li> <li><a href="#">The New Scientist</a></li> </ul> </li> <li class="store"> <a href="#">Store</a> <ul> <li> <a href="#">Clothes</a> <ul> <li> <a href="#">Women's Clothing</a> <ul> <li><a href="#">Tops</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">Trousers</a></li> <li><a href="#">Shoes</a></li> <li><a href="#">Sale</a></li> </ul> </li> <li> <a href="#">Men's Clothing</a> <ul> <li><a href="#">Shirts</a></li> <li><a href="#">Trousers</a></li> <li><a href="#">Shoes</a></li> <li><a href="#">Sale</a></li> </ul> </li> </ul> </li> <li> <a href="#">Jewelry</a> </li> <li> <a href="#">Music</a> </li> <li> <a href="#">Grocery</a> </li> </ul> </li> <li class="collections"><a href="#">Collections</a></li> <li class="credits"><a href="#">Credits</a></li> </ul> </nav>
Load the latest version of the jQuery library (OPTIONAL) and the hc-offcanvas-nav plugin’s files in the HTML.
<link href="/path/to/dist/hc-offcanvas-nav.css" rel="stylesheet"> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/hc-offcanvas-nav.js"></script>
Initialize the jQuery HC-MobileNav plugin and achieved it.
$('#main-nav').hcMobileNav();
Specify the display screen width at which breakpoint the plugin hides the common navigation.
$('#main-nav').hcMobileNav({ disableAt: 1024 });
Customize the textual content for the shut/again labels.
$('#main-nav').hcMobileNav({ insertClose: true, insertBack: true, labelClose: 'Close', labelBack: 'Back', levelTitleAsBack: true });
Push the principle content material to the opposite facet when the HC MobileNav is toggled.
$('#main-nav').hcMobileNav({ pushContent: true // default false });
Set the route of the HC MobileNav. Possible values: ‘left’ (default), ‘proper’, ‘prime’ and ‘backside’
$('#main-nav').hcMobileNav( position: 'right' );
More customization choices for the HC MobileNav.
$('#main-nav').hcMobileNav({ // width & height width: 280, height: 'auto', // enable swipe gestures swipeGestures: true, // initialize the menu in expanded mode expanded: false // overlap / expand / none levelOpen: 'overlap', // in pixels levelSpacing: 40, // shows titles for submenus levelTitles: false, // close sub levels when the nav closes closeOpenLevels: true, // clear active levels when the nav closes closeActiveLevel: false, // the title of the first level navTitle: null, // additional CSS class(es) navClass: '', // disable body scroll disableBody: true, // close the nav on click on closeOnClick: true, // {custom} toggle element customToggle: null, // prepend or append the menu to body bodyInsert: 'prepend', // should unique menus and their objects lessons be preserved or excluded. keepClasses: true, // take away unique menu from the DOM removeOriginalNav: false // allow RTL mode rtl: false });
API strategies.
// open the menu instance.open(); // open a selected sub-menu instance.open(level, index); // shut the menu instance.close(); // examine if the menu is opened instance.isOpen(); // return the present choices instance.getSettings(); // update options instance.update(); // update the nav DOM instance.update(true); // replace the choices and the DOM instance.update(, true);
Events.
instance.on('close', function(event, settings) // on close ); instance.on('close.once', function(event, settings) // on close only as soon as ); instance.on('close.level', function(event, settings) ); instance.on('open', function(event, settings) { // on open }); instance.on('open.level', function(event, settings) );
Multi-Level Side Menu CSS, MediaQuery, jQuery Side Panel Menu Plugin with Demo
See Demo And Download
Official Website(somewebmedia): Click Here
This superior jQuery/javascript plugin is developed by somewebmedia. For extra Advanced Usages, please go to the official website.
Be First to Comment