Megadropdown.js es un complemento de jQuery que se usa para implementar fácilmente el menú desplegable. Podemos crear menús desplegables responsivos fácilmente usando megadropdown.js.
Podemos tomar listas anidadas de HTML estándar y convertirlas en mega menús horizontales usando este complemento.
Sus características son las siguientes:
- Podemos agregar efectos de animación como fundido de entrada o deslizamiento hacia abajo para mostrar submenús.
- Podemos seleccionar la cantidad de elementos del submenú que se mostrarán en cada fila del mega menú
- Con algunos estilos básicos de CSS, se puede usar para crear una navegación única y visualmente atractiva para cualquier sitio web.
Enlace CDN: para usar este complemento, simplemente agregue los enlaces CDN.
<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 ”></guion>
Ejemplo:
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<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>
<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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204611/pic2-300x214.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204603/pic1-300x214.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204619/pic3-300x214.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204629/pic4-300x214.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204639/pic5-300x167.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204647/pic6-300x214.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204904/pic7-300x167.png" />
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="photo">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210324204911/pic8-300x214.png" />
</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>
Producción:
- Al hacer clic en el menú Cursos:
Menú de cursos
- Al hacer clic en el menú Servicios:
Menú de servicios
/li>