jQuery Megadropdown.js
Megadropdown.js is a jQuery plugin that is used for easy implementation of the drop-down menu. We can create responsive drop-down menus easily using megadropdown.js.
We can take standard HTML nested lists and turns them into horizontal mega menus using this plugin.
Its features are as follows:
- We can add animation-effects like fade in or slide down to display sub-menus.
- We can select the number of sub-menu items to be shown on each row of the mega menu
- With some basic CSS styling, it can be used to create unique and visually appealing navigation for any website.
CDN Link: To use this plugin, simply add the CDN links.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/mmenu-js/8.5.22/mmenu.js”></script>
Example:
HTML
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script> <style> .navbar-brand > img { padding-top: 11px; width: 130px; margin-left: 60px; } .navbar-brand { height: auto; margin: 0; padding: 0; margin-right: 20px; } .navbar-default { color: #fff; background-color: red; border-color: #000000; } .navbar-default .navbar-nav > li > a { color: #fff; } .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: blue; border-bottom-color: #fff; } .navbar-default .navbar-brand { color: #fff; } .menu-large { position: static !important; } .megamenu { padding: 20px 0px; width: 100%; } .megamenu > li > ul { padding: 0; margin: 0; } .megamenu > li > ul > li { list-style: none; } .megamenu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .megamenu > li ul > li > a:hover, .megamenu > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .megamenu.disabled > a, .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { color: #999999; } .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color: #00a7e8; } .megamenu.disabled > a:hover, .megamenu.disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .megamenu.dropdown-header { color: #428bca; font-size: 18px; } @media (max-width: 768px) { .megamenu { margin-left: 0; margin-right: 0; } .megamenu > li { margin-bottom: 30px; } .megamenu > li:last-child { margin-bottom: 0; } .megamenu.dropdown-header { padding: 3px 15px !important; } .navbar-nav .open .dropdown-menu .dropdown-header { color: #fff; } } </style> </head> <body> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Courses </a> <ul class="dropdown-menu megamenu row"> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="photo"> <img src= </a> </div> </li> </ul> </li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Services <b class="caret"></b></a> <ul class="dropdown-menu megamenu row"> <li class="col-sm-6"> <ul> <li class="dropdown-header"> Web </li> <li><a href="#"> HTML CSS </a> </li> <li class="disabled"><a href="#"> Node JS </a> </li> <li><a href="#"> React </a> </li> <li class="divider"></li> <li class="dropdown-header"> Andriod </li> <li><a href="#"> Kotlin </a> </li> <li><a href="#"> Flutter </a> </li> <li><a href="#"> Java </a> </li> </ul> </li> <li class="col-sm-6"> <ul> <li class="dropdown-header"> Graphic Design </li> <li><a href="#"> Figma</a> </li> <li><a href="#"> Adobe XD</a> </li> <li class="divider"></li> <li class="dropdown-header"> Game Dev </li> <li><a href="#"> Blender</a> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> <script> // Javascript to use megadropdown.js $(document).ready(function() { jQuery(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this) .stop().fadeIn("fast"); }, function() { $('.dropdown-menu', this) .stop().fadeOut("fast"); }); }); } </script> </body> </html> |
Output:
- On click of Courses menu:
Courses menu
- On click of Services menu:
/li>
Services menu
.png)
.png)
