JQuery Mega Menu Plugin

This plugin all about mega menu on your beautiful projects. it helps you to massive menu items under a roof.

Please checkout codepen demo

How It Works ?

This plugin includes all final assets in build directory. There you can find CSS and JS files which is necessary to use the plugin. that is build/css/megamenu.min.css and build/js/megamenu.min.js. Please use these files in your projects for using plugin.

How to get stared ?

Importing CSS file in your HTML

<link rel="stylesheet" href="build/css/megamenu.min.css">

Importing CSS with CDN

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rehyan21/Mega-Menu/build/css/megamenu.min.css">

Importing JQuery file in your HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Importing Plugin JS file below JQuery in your HTML

 <script src="build/js/megamenu.min.js" type="text/javascript"></script>

Importing JS with CDN

<script src="https://cdn.jsdelivr.net/gh/rehyan21/Mega-Menu/build/js/megamenu.min.js" type="text/javascript"></script>

Then, add this HTML structure

  <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="#">Brands</a></li>
      </ul>
    </div>
    <div class="menu-dropdown">
      <ul class="menu-item-wrapper" id="products">
        <li class="link-category">Men</li>
        <li><a href="#">Nike Shoe</a></li>
        <li><a href="#">Puma Boots</a></li>
      </ul>
      <ul class="menu-item-wrapper" id="career">
        <li><a href="#">Caterpillar</a></li>
        <li><a href="#">Fossil</a></li>
      </ul>
    </div>
  </div>

Now all set to start using this amazing plugin !!

Optional

1. You have option to import animated.css library to animate mega-menu dropdowns using its classes

2. You have option to import font-awesome.css library to add caret icon using its classes

Usage

Initiate megaMenu() function on your JS code like this

  $(".mega-menu").megaMenu({
    
  })

Options

Options	Type	Default	Value
caret	Boolean	false	true
caretArrows	Array	up: "caret-up" down: "caret-down"	up, down, upUrl, downUrl
stickyHeader	Boolean	true	false
menuBehaviour	string	click	Mouse Events
highlighter	Boolean	true	false
highlightColor	String	red	Any color with #HEX or by name
followingHighlighter	Boolean	false	true
textHighlighter	Boolean	false	true
textHighlighterColor	String	red	Any color with #HEX or by name
animation	Boolean	false	true
animationClass	String	Need to set animation:true	Any custom animation class name or animated.css

Examples

1. Header default set to sticky. if you wish to disable sticky header.

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

2. To set custom caret icon using font-awesome.css

  $(".mega-menu").megaMenu({
    caret:true,
    caretArrows: [{
      up:"fa fa-angle-up",
      down:"fa fa-angle-down",
    }],
  })

3. To set custom caret icon using image or SVG.

  $(".mega-menu").megaMenu({
    caret:true,
    caretArrows: [{
      upUrl: "assets/up-arrow.png",
      downUrl: "assets/down-arrow.png",
    }],
  })

4. To set custom animation using animate.css or pass animation class over animationClass property.

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

Thanks