Back to post

Stellarnav is a very useful, responsive, and lightweight jQuery plugin that converts an unordered menu list into a dropdown menu easily. This plugin supports infinite level of submenus and it works to all types of screen sizes including desktop, tablets, and mobile devices. The style of the menu can be modified through CSS so anyone can change it's default style easily.

Features:

How to use it:

1. Include the Javascript stellarnav.min.js at the bottom of the web page.

<script src="path/to/stellarnav.min.js"></script>

2. Include the CSS stellarnav.min.css in the header of the page.

<link rel="stylesheet" href="path/to/stellarnav.min.css">

3. Add the basic HTML to the page.

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

4. Initialize the plugin and we're ready to go. 

jQuery(document).ready(function($) {
	jQuery('.stellarnav').stellarNav();
});

Mega Dropdowns

<div class="stellarnav">
   <ul>
      <li class="mega" data-columns="4">
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
        <a href="#">Item</a>
      </li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
   </ul>
</div>

Plugin's default options:

jQuery('.stellarnav').stellarNav({
  theme: 'plain', // adds default color to nav. (light, dark)
  breakpoint: 768, // number in pixels to determine when the nav should turn mobile friendly
  menuLabel: 'Menu', // label for the mobile nav
  sticky: false, // makes nav sticky on scroll (desktop only)
  position: 'static', // 'static', 'top', 'left', 'right' - when set to 'top', this forces the mobile nav to be placed absolutely on the very top of page
  openingSpeed: 250, // how fast the dropdown should open in milliseconds
  closingDelay: 250, // controls how long the dropdowns stay open for in milliseconds
  showArrows: true, // shows dropdown arrows next to the items that have sub menus
  phoneBtn: '', // adds a click-to-call phone link to the top of menu - i.e.: "18009084500"
  phoneLabel: 'Call Us', // label for the phone button
  locationBtn: '', // adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/"
  locationLabel: 'Location', // label for the location button
  closeBtn: false, // adds a close button to the end of nav
  closeLabel: 'Close', // label for the close button
  mobileMode: false,
  scrollbarFix: false // fixes horizontal scrollbar issue on very long navs
});
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".
phoneLabel String Call Us Label (text) for the phone button.
locationBtn String '' Adds a location link to the top of menu - i.e.: "/location/", "http://site.com/contact-us/".
locationLabel String Location Label (text) for the location button.
closeBtn Boolean false Adds a close button to the end of nav.
closeLabel String Close Label (text) for the close button.
mobileMode Boolean false Turns the menu mobile friendly by default.
scrollbarFix Boolean false Fixes horizontal scrollbar issue on very long menus.

Default Example

HTML structure

<div class="stellarnav default-nav">
   <ul>
      <li><a href="#">Dropdown</a>
        <ul>
          <li><a href="#">Menu Level - 2.1</a>
            <ul>
              <li><a href="#">Menu Level - 3.1</a>
                <ul>
                  <li><a href="#">Menu Level - 4.1</a></li>
                  <li><a href="#">Menu Level - 4.2</a></li>
                  <li><a href="#">Menu Level - 4.3</a></li>
                </ul>
              </li>
              <li><a href="#">Menu Level - 3.2</a></li>
              <li><a href="#">Menu Level - 3.3</a></li>
              <li><a href="#">Menu Level - 3.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Level - 2.2</a></li>
          <li><a href="#">Menu Level - 2.3</a></li>
          <li><a href="#">Menu Level - 2.4</a></li>
          <li><a href="#">Menu Level - 2.5</a></li>
        </ul>
      </li>
      <li><a href="#">Item - 2</a></li>
      <li><a href="#">Item - 3</a></li>
      <li class="drop-left"><a href="#">Drop Left</a>
        <ul>
          <li><a href="#">Menu Level - 2.1</a>
            <ul>
              <li><a href="#">Menu Level - 3.1</a>
                <ul>
                  <li><a href="#">Menu Level - 4.1</a></li>
                  <li><a href="#">Menu Level - 4.2</a></li>
                  <li><a href="#">Menu Level - 4.3</a></li>
                </ul>
              </li>
              <li><a href="#">Menu Level - 3.2</a></li>
              <li><a href="#">Menu Level - 3.3</a></li>
              <li><a href="#">Menu Level - 3.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Level - 2.2</a></li>
          <li><a href="#">Menu Level - 2.3</a></li>
          <li><a href="#">Menu Level - 2.4</a></li>
          <li><a href="#">Menu Level - 2.5</a></li>
        </ul>
      </li>
   </ul>
</div>

Script

jQuery(document).ready(function($) {
	jQuery('.default-nav').stellarNav({
    theme: 'dark'
  });
});

Scroll to fixed

HTML structure

<div class="stellarnav scroll-to-fixed">
   <ul>
      <li><a href="#">Dropdown</a>
        <ul>
          <li><a href="#">Menu Level - 2.1</a>
            <ul>
              <li><a href="#">Menu Level - 3.1</a>
                <ul>
                  <li><a href="#">Menu Level - 4.1</a></li>
                  <li><a href="#">Menu Level - 4.2</a></li>
                  <li><a href="#">Menu Level - 4.3</a></li>
                </ul>
              </li>
              <li><a href="#">Menu Level - 3.2</a></li>
              <li><a href="#">Menu Level - 3.3</a></li>
              <li><a href="#">Menu Level - 3.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Level - 2.2</a></li>
          <li><a href="#">Menu Level - 2.3</a></li>
          <li><a href="#">Menu Level - 2.4</a></li>
          <li><a href="#">Menu Level - 2.5</a></li>
        </ul>
      </li>
      <li><a href="#">Item - 2</a></li>
      <li><a href="#">Item - 3</a></li>
      <li class="drop-left"><a href="#">Drop Left</a>
        <ul>
          <li><a href="#">Menu Level - 2.1</a>
            <ul>
              <li><a href="#">Menu Level - 3.1</a>
                <ul>
                  <li><a href="#">Menu Level - 4.1</a></li>
                  <li><a href="#">Menu Level - 4.2</a></li>
                  <li><a href="#">Menu Level - 4.3</a></li>
                </ul>
              </li>
              <li><a href="#">Menu Level - 3.2</a></li>
              <li><a href="#">Menu Level - 3.3</a></li>
              <li><a href="#">Menu Level - 3.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Level - 2.2</a></li>
          <li><a href="#">Menu Level - 2.3</a></li>
          <li><a href="#">Menu Level - 2.4</a></li>
          <li><a href="#">Menu Level - 2.5</a></li>
        </ul>
      </li>
   </ul>
</div>

Script

jQuery(document).ready(function($) {
	jQuery('.scroll-to-fixed').stellarNav({
    theme: 'dark',
    sticky: true
  });
});

Mega Menu

HTML structure

<div class="stellarnav mega-menu">
   <ul>
     <li class="mega" data-column="5"><a href="">Mega Dropdown</a>
         <ul>
           <li><a href="#">How deep?</a>
             <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>
             </ul>
           </li>
           <li><a href="#">Item</a>
             <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>
             </ul>
           </li>
           <li><a href="#">Item</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="#">Here's a very long item.</a>
             <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>
             </ul>
           </li>
         </ul>
       </li>
      <li><a href="#">Item - 2</a></li>
      <li><a href="#">Item - 3</a></li>
      <li class="drop-left"><a href="#">Drop Left</a>
        <ul>
          <li><a href="#">Menu Level - 2.1</a>
            <ul>
              <li><a href="#">Menu Level - 3.1</a>
                <ul>
                  <li><a href="#">Menu Level - 4.1</a></li>
                  <li><a href="#">Menu Level - 4.2</a></li>
                  <li><a href="#">Menu Level - 4.3</a></li>
                </ul>
              </li>
              <li><a href="#">Menu Level - 3.2</a></li>
              <li><a href="#">Menu Level - 3.3</a></li>
              <li><a href="#">Menu Level - 3.4</a></li>
            </ul>
          </li>
          <li><a href="#">Menu Level - 2.2</a></li>
          <li><a href="#">Menu Level - 2.3</a></li>
          <li><a href="#">Menu Level - 2.4</a></li>
          <li><a href="#">Menu Level - 2.5</a></li>
        </ul>
      </li>
   </ul>
</div>

Script

jQuery(document).ready(function($) {
	jQuery('.mega-menu').stellarNav({
    theme: 'dark',
    sticky: false
  });
});