Responsive & Lightweight Plugin For Navigation Menus – Stellarnav

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:

• Stellarnav has 3 different predefined theme options: Light, Dark, and Plain.
• Option to make the menu sticky on the scroll.
• Auto fix of horizontal scrollbar issue on very long navigations.
• Option to change dropdown direction.

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
});