jQuery responsive multi-level dropdown menu – stellarnav

by Posted on

Stellarnav is a great solution for long navigation menus with lots of menu items that supports infinite levels of sub menus and auto switches to a small screen friendly toggle menu when the window width reaches a specified breakpoint. It is Responsive, lightweight, multi-level dropdown menu.
jquery-menu1


Libraries

Include the StellarNav stylesheet and JS library.

<link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.min.css">
<script type="text/javascript" src="js/stellarnav.js"></script>

HTML

Add a stellarnav class to your menu div.

<div class="stellarnav">
     <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
     </ul>
</div>

JS

Call the plugin stellarNav()

<script type="text/javascript">
jQuery(document).ready(function($) {
	jQuery('.stellarnav').stellarNav();
});
</script>




Here are the list of options you can use to customize the plugin.

jQuery('.stellarnav').stellarNav({
	theme: 'plain',
	breakpoint: 768,
	menuLabel: 'Menu',
	sticky: false,
	position: 'static',
	openingSpeed: 250,
	closingDelay: 250,
	showArrows: true,
	phoneBtn: '',
	locationBtn: '',
	closeBtn: false,
  	mobileMode: false,
	scrollbarFix: false
});
Attribute Type Default Description
theme String plain Adds default color to nav. [plain, light, dark]
breakpoint Integer 768 Number in pixels to determine when the nav should turn mobile friendly.
menuLabel String Menu Label (text) for the mobile nav.
sticky Boolean false Makes nav sticky on scroll.
position String static [static, top, left, right] – When set to ‘top’, this forces the mobile nav to be placed absolutely on the very top of page. When set to ‘left’ or ‘right’, mobile nav fades in/out from left or right, accordingly.
openingSpeed Integer 250 Controls how fast the dropdowns open in milliseconds.
closingDelay Integer 250 Controls how long the dropdowns stay open for in milliseconds.
showArrows Boolean true Shows dropdown arrows next to the items that have sub menus.
phoneBtn String '' Adds a click-to-call phone link to the top of menu – i.e.: “18009084500”.
locationBtn String '' Adds a location link to the top of menu – i.e.: “/location/”, “http://site.com/contact-us/“.
closeBtn Boolean false Adds a close button to the end of nav.
mobileMode Boolean false Turns the menu mobile friendly by default.
scrollbarFix Boolean false Fixes horizontal scrollbar issue on very long menus.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by vinnymoreira. Visit their official github repository for more information and follow for future updates.


Published by admin