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.
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.
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.
This awesome plugin is developed by vinnymoreira. Visit their official github repository for more information and follow for future updates.
