Sticky Responsive Mega Menu Plugin - jQuery megaMenu

A lightweight jQuery plugin which generates a responsive, customizable, sticky, mobile-compatible, SEO-friendly, multi-column mega menu from nested HTML lists.

The plugin automatically collapses the mega menu into a multi-level drop-down navigation for better visibility and readability on mobile devices.

More features:

• Always be visible no matter how you scroll the page.
• Custom animations when collapsing & expanding the menu ga menu.
• Auto highlight the menu items when activated.

See also:

• Best Responsive Dropdown Menus
• Best Responsive Menu Plugins
• Best Accordion Menu Components
• Best Circle Menu Plugins
• Best Mega Menu Systems

How to use it:

1. Load the Font Awesome Iconic Font for the icons (OPTIONAL).

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

2. Load the Animate.css for awesome CSS animations (OPTIONAL).

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

3. Load the jQuery megaMenu plugin's files in the html document.

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

4. The HTML structure for the mega menu.

<nav>
  <div class="mega-menu menuClass">
    <div class="mobile-nav-icon">
      <a class="" href="#">
        <span class="fa fa-bars"></span>
      </a>
    </div>
    <div class="main-links">
      <ul>
        <li><a data-submenu="products" href="#">Products</a></li>
        <li><a data-submenu="career" href="#">Career</a></li>
        <li><a data-submenu="resources"  href="#">Resources</a></li>
        <li><a href="#">Blog</a></li>
        <li><a data-submenu="support"  href="#">Support</a></li>
      </ul>
    </div>
    <div class="menu-dropdown">
      <ul class="menu-item-wrapper" id="products">
        <li class="link-category">Something</li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li class="link-category">Something</li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">products</a></li>
      </ul>

      <ul class="menu-item-wrapper dropdown" id="support">
        <li><a href="#">Support</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Support</a></li>
        <li><a href="#">Support</a></li>
      </ul>

      <ul class="menu-item-wrapper" id="career">
        <li><a href="#">career</a></li>
        <li><a href="#">career</a></li>
        <li><a href="#">career</a></li>
        <li><a href="#">career</a></li>
      </ul>
      <ul class="menu-item-wrapper" id="resources">
        <li><a href="#">Resoiurces</a></li>
        <li><a href="#">Resoiurces</a></li>
        <li><a href="#">Resoiurces</a></li>
        <li><a href="#">Resoiurces</a></li>
      </ul>
    </div>
  </div>
</nav>

5. Initialize the mega menu with default settings.

$(".mega-menu").megaMenu();

6. Make the mega menu sticky when scrolling down the page. Default: true.

$(".mega-menu").megaMenu({
  stickyHeader: true
});

7. Customize the trigger event to toggle the submenu. Default: 'click'.

$(".mega-menu").megaMenu({
  menuBehaviour: "mouseover"
});

8. Customize the caret.

$(".mega-menu").megaMenu({
  caret:"",
  caretArrows: [{
    up: "",
    down: "",
    upUrl:"",
    downUrl:"",
  }]
});

9. Customize the open/close animations.

$(".mega-menu").megaMenu({
  animation:true,
  animationClass:"animated fadeIn"
});

10. Highlight the activate menu items.

$(".mega-menu").megaMenu({
  highlighter: true,
  followingHighlighter: false,
  highlightColor:"",
  textHighlighterColor: ""
});

---

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