Mobile-friendly Multi-level Dropdown Menu Plugin - jQuery Stellarnav

Mobile-friendly Multi-level Dropdown Menu Plugin - jQuery Stellarnav
File Size: 12.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Stellarnav is an elegant, responsive, mobile-friendly dropdown menu plugin for jQuery 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.

More features:

  • 3 themes: plain, light and dark.
  • Allows to make nav sticky on scroll.
  • Auto fixes horizontal scrollbar issue on very long navs

How to use it:

1. The plugin requires Font Awesome iconic font to provide the menu toggle icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Load the jQuery Stellarnav plugin's files into your jQuery project as usual.

<link rel="stylesheet" href="stellarnav.min.css">
<script src='/path/to/jquery.min.js'></script>
<script src="stellarnav.js"></script>

3. Create a nested nav list for the responsive multi-level dropdown navigation.

<div id="main-nav" class="stellarnav">
    <ul>
      <li><a href="">Dropdown</a>
          <ul>
            <li><a href="#">How deep?</a>
              <ul>
                <li><a href="#">Deep</a>
                  <ul>
                    <li><a href="#">Even deeper</a>
                      <ul>
                        <li><li><a href="#">Item</a></li></li>
                        <li><li><a href="#">Item</a></li></li>
                        <li><li><a href="#">Item</a></li></li>
                      </ul>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                  </ul>
                </li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
              </ul>
            </li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Here's a very long item. It can be as long as you want</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
        <li><a href="">Item 6</a></li>
        <li class="drop-left"><a href="">Drop Left</a>
          <ul>
            <li><a href="#">How deep?</a>
              <ul>
                <li><a href="#">Deep</a>
                  <ul>
                    <li><a href="#">Even deeper</a>
                      <ul>
                        <li><li><a href="#">Item</a></li></li>
                        <li><li><a href="#">Item</a></li></li>
                        <li><li><a href="#">Item</a></li></li>
                      </ul>
                    </li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                  </ul>
                </li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
              </ul>
            </li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
          </ul>
        </li>
    </ul>
</div>

4. Invoke the plugin with default settings and we're done.

jQuery('#main-nav').stellarNav();

5. Default plugin settings to config the responsive multi-level dropdown navigation.

jQuery('#main-nav').stellarNav({

  // adds default color to nav. (light, dark)
  theme     : 'plain', 

  // number in pixels to determine when the nav should turn mobile friendly
  breakpoint: 768, 

  // adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
  phoneBtn: false, 

  // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
  locationBtn: false, 

  // makes nav sticky on scroll
  sticky     : false, 

  // 'static' or 'top' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page
  position: 'static', 

  // shows dropdown arrows next to the items that have sub menus
  showArrows: true, 

  // adds a close button to the end of nav
  closeBtn     : false, 

  // fixes horizontal scrollbar issue on very long navs
  scrollbarFix: false 
  
});

Change log:

2017-10-06

  • Added 'left' and 'right' position options

2017-07-13

  • Fixed the issue of nav opening in mobile mode when opening links on new tabs

2017-04-14

  • moved phone and location buttons to menu bar

2017-01-26

  • Fixed issue with desktop and mobile css classes

2017-01-12

  • Adjusted the .drop-left css class

2016-12-22


This awesome jQuery plugin is developed by vinnymoreira. For more Advanced Usages, please check the demo page or visit the official website.