Skip to content

Latest commit

 

History

History
216 lines (174 loc) · 5.65 KB

README.md

File metadata and controls

216 lines (174 loc) · 5.65 KB

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
  })
  1. 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",
    }],
  })
  1. 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",
    }],
  })
  1. To set custom animation using animate.css or pass animation class over animationClass property.
  $(".mega-menu").megaMenu({
    animation:true,
    animationClass:"animated fadeIn",
  })

Thanks