Menú desplegable
Ejercicio para practicar habilidades de HTML y CSS. Dentro de un menú común de opciones, abrimos dos menúes desplegables 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>Menú desplegable</title>
</head>
<body>
<header>
<nav class="contenedor">
<a href="#inicio" id="logo">🤖 LOGO</a>
<input type="checkbox" id="abrir-menu">
<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-flecha)"><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">
<span>Productos</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--color-flecha)"><path d="M480-80 200-360l56-56 184 183v-647h80v647l184-184 56 57L480-80Z"/></svg>
</a>
<label for="menu1" class="celu-label">
<span>Productos</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--color-flecha)"><path d="M480-240 240-480l56-56 144 144v-368h80v368l144-144 56 56-240 240Z"/></svg>
</label>
<input type="checkbox" id="menu1" class="celu-input">
<ul class="subopciones">
<li><a href="#escolares">escolares</a></li>
<li><a href="#novelas">novelas</a></li>
<li><a href="#biografias">biografías</a></li>
<li><a href="#deportes">deportes</a></li>
<li><a href="#historicos">históricos</a></li>
</ul>
</li>
<li>
<a href="#" class="escritorio">
<span>Sucursales</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--color-flecha)"><path d="M480-80 200-360l56-56 184 183v-647h80v647l184-184 56 57L480-80Z"/></svg>
</a>
<label for="menu2" class="celu-label">
<span>Sucursales</span>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--color-flecha)"><path d="M480-240 240-480l56-56 144 144v-368h80v368l144-144 56 56-240 240Z"/></svg>
</label>
<input type="checkbox" id="menu2" class="celu-input">
<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>
</ul>
</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="#1f1f1f"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
</label>
</nav>
</header>
<main>
<section id="inicio">inicio</section>
<section id="escolares">escolares</section>
<section id="novelas">novelas</section>
<section id="biografias">biografías</section>
<section id="deportes">deportes</section>
<section id="historicos">históricos</section>
<section id="argentina">argentina</section>
<section id="paraguay">paraguay</section>
<section id="uruguay">uruguay</section>
<section id="chile">chile</section>
<section id="contacto">contacto</section>
</main>
<footer></footer>
<script src="script.js"></script>
</body>
</html>CSS
:root{
--color-flecha:black;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
scroll-padding-top: 4rem;
}
::selection{
background-color: palevioletred;
}
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-track{
background: transparent;
}
::-webkit-scrollbar-thumb{
background-color: #333;
border-radius: 2rem;
}
a{
text-decoration: none;
color: inherit;
white-space: nowrap;
}
ul{
list-style: none;
}
#abrir-menu, #abrir-label,#cerrar-label,.celu-input,.celu-label{
display: none;
}
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.3rem;
}
.contenedor{
width: min(calc(100% - 32px), 1200px);
margin: 0 auto;
}
header{
height: 65px;
background-color: palevioletred;
position: sticky;
top:0;
left: 0;
right: 0;
z-index: 10;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
}
header nav a#logo{
font-weight: 600;
font-size: 1.6rem;
}
header nav a#logo:hover{
color: antiquewhite;
}
header nav ul.opciones{
display: flex;
justify-content: center;
gap:2rem;
line-height: 65px;
}
header nav ul.opciones ul.subopciones{
position: absolute;
top:80px;
background-color: palevioletred;
border-radius: 0 0 8px 8px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
padding-right:2rem;
line-height: 45px;
visibility: hidden;
opacity: 0;
height: 0;
overflow: hidden;
transition: 0.2s linear;
}
header nav ul.opciones li:hover ul.subopciones{
top:65px;
visibility: visible;
opacity: 1;
height: auto;
}
header nav ul.opciones a , .celu-label{
padding: 10px 20px;
font-weight: 500;
text-transform: capitalize;
}
header nav ul.opciones a:hover{
color: antiquewhite;
}
header nav ul.opciones a svg,header nav ul.opciones label svg{
transform: translateY(30%);
}
header nav ul.opciones a:hover svg,header nav ul.opciones label:hover svg{
--color-flecha:antiquewhite;
transform: rotate(180deg);
}
section{
min-height: 100vh;
display: grid;
place-items: center;
text-transform: uppercase;
font-size: 5rem;
border-bottom: 4px solid palevioletred;
}
/* Celulares y tablets */
@media (max-width:968px) {
#abrir-label,#cerrar-label{
display: block;
cursor: pointer;
}
#cerrar-label{
position: absolute;
top:2rem;
right: 2rem;
}
#cerrar-label:hover{
top:2.5rem!important;
}
#abrir-label{
position: absolute;
top:1rem;
right: 2rem;
}
#logo{
position: absolute;
top:1rem;
left: 2rem;
}
header nav ul.opciones{
position: fixed;
top:0;
left:-125%;
height: 100vh;
width: min(80%, 25rem);
display: block;
line-height: 45px;
padding-top: 10rem;
background-color: palevioletred;
box-shadow: 2px 2px 2px rgba(0,0,0,0.05);
transition: 0.3s linear;
}
#abrir-menu:checked ~ ul.opciones{
left:0;
}
.escritorio{
display: none;
}
.celu-label{
display: inline;
cursor: pointer;
}
.celu-label:hover{
color: antiquewhite;
}
header nav ul.opciones ul.subopciones{
position: static;
visibility: visible;
opacity: 1;
height: auto;
box-shadow: none;
padding-left: 2rem;
max-height: 0;
transition: 0.2s linear;
}
.celu-input:checked ~ ul.subopciones{
max-height: 15rem;
}
section{
font-size: 3rem;
}
}Javascript
const subopciones = document.querySelectorAll("ul.subopciones li");
const menuessub = document.querySelectorAll(" ul.subopciones");
const menuesInput = document.querySelectorAll(".celu-input");
subopciones.forEach(opcion=>{
opcion.addEventListener('click',()=>{
menuessub.forEach(item=>{
item.style.display='none';
});
});
});
subopciones.forEach(opcion=>{
opcion.addEventListener('mouseleave',()=>{
menuessub.forEach(item=>{
item.style.display='block';
});
});
});
window.onscroll = ()=>{
document.querySelector('#abrir-menu').checked = false;
menuesInput.forEach(item=>{
item.checked = false;
});
}Recursos
Íconos menú y cerrar : https://fonts.google.com