Minimalist Responsive Dropdown Menu Plugin With jQuery - mainNavigation

mainNavigation is a simple, lightweight jQuery plugin for generating a multi-level dropdown menu that automatically collapses into an off-canvas menu in mobile view.

Main features:

• Sticky menu supported.
• Push menu or overlay menu supported.
• Custom content overlay when menu opened.

How to use it:

1. Create the multi-level dropdown menu from a nested html list, like this:

<div id="mainNav-container">
  <button id="mainNav-toggle" type="button" class="">
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
  </button>
  <ul id="mainNav-menu" class="mainNav-menu mainNav-horizontal">
    <li class="mainNav-dropdown"> <a href="#">Item 1</a>
      <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
        <li><a href="#">Sub Item 3</a></li>
        <li><a href="#">Sub Item 4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li class="mainNav-dropdown"> <a href="#">Item 4</a>
      <ul>
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
        <li><a href="#">Sub Item 3</a></li>
        <li><a href="#">Sub Item 4</a></li>
        <li class="mainNav-dropdown"> <a href="#">Sub Item 5</a>
          <ul>
            <li><a href="#">Sub Sub Item 1</a></li>
            <li><a href="#">Sub Sub Item 2</a></li>
            <li><a href="#">Sub Sub Item 3</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Item 6</a></li>
        <li><a href="#">Sub Item 7</a></li>
      </ul>
    </li>
    <li><a href="#">Item 5</a></li>
  </ul>
</div>

2. Wrap the main content into the container 'push-mainNav-container'.

<div class="container push-mainNav-container">
  Main content go here
</div>

3. Put the jQuery mainNavigation plugin's stylesheet in the head section of your webpage.

<link href="nav.css" rel="stylesheet">

4. Put jQuery library and the jQuery mainNavigation plugin's JavaScript at the bottom of your webpage.

<script src="jquery.js"></script>
<script src="mainNav.js"></script>

5. Initialize the plugin and done.

$('#mainNav-container').mainNav();

6. Possible plugin options.

$('#mainNav-container').mainNav({

  // left || right || top 
  responsiveFrom: "left",  

  // enable sticky navigation
  stickyNav: false,

  // enable push menu
  pushNav: false,

  // overlay options
  hasOverlay: true,
  overlayColor: "#000",
  opacity: ".7"
  
});

---

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