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:
<!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:
- On click of Services menu: /li>