jQuery responsive multi-level dropdown menu designed to do most of the heavy CSS work for you.
CSS JavaScript HTML
Latest commit 6491c1f Jan 11, 2017 @vinnymoreira committed on GitHub Adjusted the .drop-left css class
Removed the :hover from .stellarnav > ul > li.drop-left > ul to fix the jump on the dropdown.
Permalink
Failed to load latest commit information.
css
js
LICENSE
README.md
index.html

README.md

StellarNav.js

jQuery responsive multi-level dropdown menu designed to do most of the heavy CSS work for you.

Installation

CSS

Include FontAwesome for the menu icons and the StellarNav stylesheet.

<link rel="stylesheet" type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.min.css">

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>

Javascript

Include stellarnav.min.js and call stellarNav().

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

Options

Here's a list of available settings.

jQuery('.stellarnav').stellarNav({
    theme     : 'plain',
    breakpoint: 768,
    phoneBtn: false,
    locationBtn: false,
    sticky     : false,
    position: 'static',
    showArrows: true,
    closeBtn     : 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.
phoneBtn String false Adds a click-to-call phone link to the top of menu - i.e.: "18009084500".
locationBtn String false Adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/".
sticky Boolean false Makes nav sticky on scroll.
position String static [static, top] - When set to 'top', this forces the mobile nav to be placed absolutely on the very top of page.
showArrows Boolean true Shows dropdown arrows next to the items that have sub menus.
closeBtn Boolean false Adds a close button to the end of nav.
scrollbarFix Boolean false Fixes horizontal scrollbar issue on very long navs.

Extra

For long dropdown menus towards the last navigation items, you may use the class drop-left to the list item so that the dropdown drops leftward. This prevents menu from breaking the grid and getting a horizontal scrollbar.

<div class="stellarnav">
     <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="drop-left"><a href="#">Last Dropdown Item</a>
            <ul>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a>
                    <ul>
                        <li><a href="#">Drop left menu item</a></li>
                        <li><a href="#">Drop left menu item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
     </ul>
</div>

If this is not an option and you are still getting a scrollbar, you may also set the scrollbarFix option to true.