Como hacer un Mega Menu de Navegación con HTML, CSS y JavaScript
Por mega menu nos referimos al menu de navegación que no solo muestre una lista de sub elementos, sino contenidos más amplios, por ejemplo, una lista de las ultimas noticias relacionadas. Veamos una forma, ya que en la web hay muchas, de como realizar esto tratando de hacerlo con pocas líneas de código y que sea fácil de entender su implementación.
Lo que queremos lograr es que del menú de navegación uno de sus elementos despliegue el famosos mega menú, como se aprecia en la imagen superior, este bloque mostrará en la parte izquierda la lista de sub elementos y la parte derecha se mostrará el contenido según el sub elemento que le demos clic, esto mediante llamadas asíncronas con JavaScript.
Estructura HTML
Mostraré aquí la estructura HTML. En la cabecera irá el logotipo a la izquierda, el menú de navegación a la derecha. El menú de navegación desplegará un bloque con sub menú y contenido.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Megamenu demo</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body class="bg">
<header class="header">
<div class="container">
<nav class="navigation clear">
<a href="#" class="logo">
<img src="images/logo.png" alt="logo">
</a>
<a href="#" class="btn-togglemenu">
<span>☰</span><span style="display: none;">✖</span>
</a>
<ul class="megamenu">
<li class="item">
<a href="#">Reviews <span class="arrow">❮</span></a>
<div class="block">
<div class="sub-menu">
<ul>
<li>
<a href="#" class="sub-item" data-id="1">Keyboards</a>
</li>
<li>
<a href="#" class="sub-item" data-id="2">Headphones</a>
</li>
<li>
<a href="#" class="sub-item" data-id="3">Controllers</a>
</li>
<li>
<a href="#" class="sub-item" data-id="4">Mouses</a>
</li>
</ul>
</div>
<div class="sub-menu-content">
<div class="notice">
<div class="notice-image">
<img src="images/keyboard1.jpg" alt="keyboard">
</div>
<div class="notice-detail">
<h4>This decked out Aero 15 is way more laptop than you need, but it’s $1,100 off</h4>
<p>Gigabyte's Aero 15 with a 4K display is deeply discounted right now, plus there's a sizable mail-in-rebate available.</p>
</div>
</div>
<div class="notice">
<div class="notice-image">
<img src="images/keyboard2.jpg" alt="keyboard">
</div>
<div class="notice-detail">
<h4>AMD claims its largest share of the overall x86 CPU market in 14 years</h4>
<p>According to Mercury Research, AMD's x86 processor share is close to its all-time high.</p>
</div>
</div>
<div class="notice">
<div class="notice-image">
<img src="images/keyboard3.jpg" alt="keyboard">
</div>
<div class="notice-detail">
<h4>Hacker steals over $600M in cryptocurrency, returns over half of it</h4>
<p>Over $340M has been given back as a very strange digital heist story continues to develop.</p>
</div>
</div>
</div>
</div>
</li>
<li class="item">
<a href="#">Gaming</a>
</li>
<li class="item">
<a href="#">Gadgets</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="intro">
<h1>Megamenu develop</h1>
<p>Hi! here a sample of megamenu</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>Hoja de estilos
Vamos a darle los estilos visuales adecuados para que se vea bonito 🙂
css/style.css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;600;800&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Nunito', sans-serif;
font-weight: 200;
}
a {
text-decoration: none;
}
.clear:before {
display: table;
content: "";
}
.clear:after {
display: table;
content: "";
clear: both;
}
.bg {
background-image: url('../images/bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
position: relative;
width: 100%;
}
.header {
background-color: #fff;
}
/* logo */
.logo {
display: inline-block;
margin: 10px 0;
}
.logo img {
max-width: 130px;
vertical-align: text-bottom;
}
/* navigation */
.btn-togglemenu {
display: none;
border: 2px solid #de5d94;
position: absolute;
top: 10px;
right: 10px;
border-radius: 3px;
padding: 8px;
color: #de5d94;
z-index: 3;
}
.navigation {
padding: 0 10px;
}
.megamenu {
float: right;
}
.megamenu>li {
display: inline-block;
height: 60px;
}
.item>a {
padding: 10px 20px;
display: block;
height: 100%;
line-height: 36px;
color: #333;
font-weight: 400;
}
.item>a .arrow {
transform: rotate(270deg);
height: 22px;
width: 22px;
display: inline-block;
margin-left: -10px;
}
.item>a:hover {
background-color: #f80463;
color: #fff;
}
.item>a:hover+.block,
.item .block:hover {
display: block;
}
/* block submenu content */
.block {
display: none;
position: absolute;
background-color: #fff;
left: 0;
right: 0;
z-index: 1;
padding: 20px 10px;
box-shadow: 1px 0 10px rgb(131, 131, 131);
}
.block .sub-menu {
float: left;
width: 15%;
}
.block .sub-menu-content {
float: right;
width: 85%;
}
.sub-menu li {
display: block;
padding: 5px;
margin-left: 20px;
}
.sub-menu li a {
font-weight: 600;
color: #333;
}
.sub-menu li a:hover {
color: #f80463;
}
.sub-menu-content .notice {
width: 33.33%;
float: left;
padding: 10px;
}
.notice img {
max-width: 100%;
height: auto;
}
.notice-detail h4 {
padding: 10px 0;
font-weight: 800;
}
.notice-detail p {
font-size: .95em;
}
/* text intro page */
.intro {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 140%;
}
.intro * {
color: #fff;
font-weight: 800;
}En una hoja de estilo adicional llamada responsive.css, escribimos las clases para cuando la página se adapte a móviles. En este caso se mostrará el submenu, pero no el contenido de éste.
responsive.css
@media (min-width: 320px) and (max-width: 480px) {
.btn-togglemenu {
display: block;
}
.container {
position: initial;
}
.megamenu>li {
display: block;
height: auto;
}
.megamenu {
display: none;
float: initial;
position: absolute;
background-color: #000;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.item>a {
color: #fff;
}
.item>a:hover {
background-color: initial;
}
.block {
position: initial;
}
.block .sub-menu {
float: initial;
width: 100%;
}
.block .sub-menu-content {
display: none;
}
}Pulir funcionamiento con JavaScript (jQuery)
Usaremos JavaScript (jQuery) para mostrar/ocultar el menú de navegación en modo móvil. También para resetear el menú de navegación a su modo inicial cuando usuario pase de móvil a pantalla completa y evitemos error al mostrar la estructura de la página. Y finalmente para hacer la llamas asíncronas, cuando usuario haga clic en cada elemento del submenú.
js/script.js
$(document).ready(function() {
/* show menu */
$('.btn-togglemenu').click(function(event) {
event.preventDefault();
$('.megamenu').animate({
width: "toggle"
});
$('.btn-togglemenu span').toggle();
});
/* reset menu */
$(window).resize(function() {
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 480) {
$('.megamenu').show();
$('.btn-togglemenu').html('<span>☰</span><span style="display: none;">✖</span>');
} else {
$('.megamenu').hide();
}
}
checkWidth();
});
/* finally: load content submenu */
$('.sub-item').click(function(event) {
event.preventDefault();
var id = $(this).attr('data-id');
$('.sub-menu-content').html('<img src="images/load.gif" style="margin:0 auto; display:block" alt="load" />');
$.ajax({
method: 'get',
url: 'partials/content' + id + '.html',
success: function(data) {
setTimeout(function() {
$('.sub-menu-content').html(data);
}, 200);
}
})
})
});Código fuente
Descargar de Github: https://github.com/RibosoMaticCode/megamenu
Recuerda suscribirte a nuestro canal en Youtube para más videos relacionados.
Deja un comentario