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