Mega menú desplegable
Ejercicio para practicar habilidades de HTML y CSS. Dentro de un menú común de opciones, abrimos un menú desplegable estándar y otro tipo mega menú sin framework.
Podés visitar el ejercicio que desarrollaremos aquí ↩
💻 Ver explicación en video de youtube.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Mega menú desplegable</title>
</head>
<body>
<header>
<nav class="contenedor">
<input type="checkbox" id="abrir-menu">
<a href="#" id="logo">🏢 LOGO</a>
<ul class="opciones">
<label for="abrir-menu" id="cerrar-label">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="var(--color-texto)"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
</label>
<li><a href="#inicio">Inicio</a></li>
<li>
<a href="#"class="escritorio" >Sucursales <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="var(--color-texto)"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></a>
<input type="checkbox" id="menu1" class="celu-input">
<label for="menu1" class="celu-label">Sucursales <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="var(--color-texto)"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></label>
<ul class="subopciones">
<li><a href="#argentina">argentina</a></li>
<li><a href="#paraguay">paraguay</a></li>
<li><a href="#uruguay">uruguay</a></li>
<li><a href="#chile">chile</a></li>
<li><a href="#bolivia">bolivia</a></li>
</ul>
</li>
<li>
<a href="#"class="escritorio">Productos <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="var(--color-texto)"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></a>
<input type="checkbox" id="menu2" class="celu-input">
<label for="menu2" class="celu-label">Productos <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="var(--color-texto)"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></label>
<div class="mega-opciones">
<div class="contenido">
<div class="columna">
<img src="imagenes/img.jpg" alt="">
</div>
<div class="columna">
<h3>Mujeres</h3>
<ul class="mega-opcion">
<li><a href="#indumentaria-m">indumentaria</a></li>
<li><a href="#zapatillas-m">zapatillas</a></li>
<li><a href="#accesorios-m">accesorios</a></li>
<li><a href="#perfumeria-m">perfumería</a></li>
</ul>
</div>
<div class="columna">
<h3>Hombres</h3>
<ul class="mega-opcion">
<li><a href="#indumentaria-v">indumentaria</a></li>
<li><a href="#zapatillas-v">zapatillas</a></li>
<li><a href="#accesorios-v">accesorios</a></li>
<li><a href="#perfumeria-v">perfumería</a></li>
</ul>
</div>
<div class="columna">
<h3>Niños</h3>
<ul class="mega-opcion">
<li><a href="#indumentaria-n">indumentaria</a></li>
<li><a href="#zapatillas-n">zapatillas</a></li>
<li><a href="#accesorios-n">accesorios</a></li>
<li><a href="#jugueteria-n">juguetería</a></li>
</ul>
</div>
</div>
</div>
</li>
<li><a href="#contacto">contacto</a></li>
</ul>
<label for="abrir-menu" id="abrir-label">
<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="var(--color-texto)"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
</label>
</nav>
</header>
<main>
<section id="inicio">Inicio</section>
<section id="argentina">Argentina</section>
<section id="uruguay">Uruguay</section>
<section id="paraguay">Paraguay</section>
<section id="chile">Chile</section>
<section id="bolivia">Bolivia</section>
<section id="indumentaria-m">Indumentaria Mujer</section>
<section id="zapatillas-m">Zapatillas</section>
<section id="accesorios-m">Accesorios Mujer</section>
<section id="perfumeria-m">Perfumería Mujer</section>
<section id="indumentaria-v">Indumentaria Hombres</section>
<section id="zapatillas-v">Zapatillas Hombres</section>
<section id="accesorios-v">Accesorios Hombres</section>
<section id="perfumeria-v">Perfumería Hombres</section>
<section id="indumentaria-n">Indumentaria Niños</section>
<section id="zapatillas-n">Zapatillas Niños</section>
<section id="accesorios-n">Accesorios Niños</section>
<section id="jugueteria-n">Jugueteria Niños</section>
<section id="contacto">Contacto</section>
</main>
<footer></footer>
<script src="script.js"></script>
</body>
</html>CSS
:root{
--color-texto:white;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
scroll-padding-top: 4rem;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
white-space: nowrap;
}
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.2rem;
}
.contenedor{
width: min(calc(100% - 32px), 1250px);
margin: 0 auto;
}
.celu-input,.celu-label,#abrir-menu,#abrir-label,#cerrar-label{
display:none;
}
header {
position: fixed;
top:0;
width: 100%;
background-color: darkcyan;
color: white;
line-height: 70px;
height: 70px;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
line-height: 70px;
height: 70px;
position: relative;
}
header nav a#logo{
font-size: 1.5rem;
font-size: 700;
}
header nav ul.opciones{
display: flex;
justify-content: center;
gap:3rem;
}
header nav ul.opciones a, header nav ul.opciones label {
font-weight: 600;
padding: 0 1.5rem;
text-transform: capitalize;
}
header nav ul.opciones a:hover{
color: cyan;
}
header nav ul.opciones ul.subopciones{
background-color: darkcyan;
border-radius: 0 0 8px 8px;
padding-inline: 1rem;
line-height: 45px;
position: absolute;
top:100px;
visibility: hidden;
opacity: 0;
transition: 0.2s linear;
}
header nav ul.opciones li:hover ul.subopciones{
top:70px;
visibility: visible;
opacity: 1;
}
header nav ul.opciones .mega-opciones{
background-color: darkcyan;
line-height: 45px;
position: absolute;
top:100px;
left: 0;
width: 100%;
visibility: hidden;
opacity: 0;
transition: 0.1s linear;
}
header nav ul.opciones li:hover .mega-opciones{
top:70px;
visibility: visible;
opacity: 1;
}
header nav ul.opciones .mega-opciones .contenido{
display: flex;
justify-content: center;
}
header nav ul.opciones .mega-opciones .contenido .columna{
border-left: 1px solid rgba(0,0,0,0.5);
width: 25%;
}
header nav ul.opciones .mega-opciones .contenido .columna h3{
color: chartreuse;
padding-left: 1rem;
}
header nav ul.opciones .mega-opciones .contenido .columna img{
width:100%;
height: 100%;
object-fit: cover;
}
header nav ul.opciones a svg, header nav ul.opciones label svg{
transform: translateY(25%);
}
header nav ul.opciones li a svg{
transition: 0.5s ease;
}
header nav ul.opciones li:hover a svg{
transform: rotate(180deg);
}
section{
min-height: 100vh;
display: grid;
place-items: center;
font-size: 3rem;
text-transform: uppercase;
border-bottom: 3px solid darkcyan;
text-align: center;
}
@media (max-width:978px) {
#abrir-label,#cerrar-label{
display: block;
cursor: pointer;
}
#abrir-label{
transform: translateY(10%);
}
#cerrar-label{
position: absolute;
top:1.5rem;
right: 1.5rem;
}
header nav ul.opciones{
position: fixed;
top:0;
left: -125%;
height: 100vh;
width: min(20rem,80%);
background-color: darkcyan;
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
display: block;
line-height: 45px;
padding-top: 10rem;
overflow-y: auto;
transition: 0.2s linear;
}
#abrir-menu:checked ~ ul.opciones{
left:0;
}
::-webkit-scrollbar{
width: 0;
}
header nav ul.opciones ul.subopciones{
padding-left: 2rem;
position: static;
visibility: visible;
opacity: 1;
max-height: 0;
overflow: hidden;
transition: 0.2s linear;
}
header nav ul.opciones .mega-opciones{
position: static;
visibility: visible;
opacity: 1;
max-height: 0;
overflow: hidden;
}
header nav ul.opciones .mega-opciones .contenido{
flex-direction: column;
padding-left: 2rem;
}
header nav ul.opciones .mega-opciones .contenido .columna:first-child{
display: none;
}
header nav ul.opciones .mega-opciones .contenido .columna{
border-left: 0px;
}
.escritorio{
display: none;
}
.celu-label{
display: block;
cursor: pointer;
}
.celu-input:checked ~ ul.subopciones{
max-height: 15rem;
}
.celu-input:checked ~ .mega-opciones{
max-height: 100rem;
}
.celu-input:checked ~ label svg{
transform: rotate(180deg);
}
}Javascript
const menuesinput = document.querySelectorAll('.celu-input')
window.onscroll = ()=>{
document.querySelector('#abrir-menu').checked = false;
menuesinput.forEach(item=>{
item.checked=false;
})
}
const subopciones = document.querySelectorAll("ul.opciones li");
const menues = document.querySelectorAll('ul.subopciones');
const mega = document.querySelector('.mega-opciones');
subopciones.forEach(opcion=>{
opcion.addEventListener('click',()=>{
if (window.matchMedia("(min-width: 978px)").matches){
menues.forEach(item=>{
item.style.display = 'none';
});
mega.style.display = 'none';
}
});
});
subopciones.forEach(opcion=>{
opcion.addEventListener('mouseleave',()=>{
if (window.matchMedia("(min-width: 978px)").matches){
menues.forEach(item=>{
item.style.display = 'block';
});
mega.style.display = 'block';
}
});
});Recursos
Íconos menú y cerrar : https://fonts.google.com