En este ejercicio vamos a crear un menú de hamburguesa. En estos ejercicios vamos a estar trabajando con módulos de Javascript.
Para la imagen de la hamburguesa nos vamos a ayudar de una página, llamada https://jonsuh.com/hamburgers/. Tenemos que llamar a la librería, para lo que nos vamos a ayudar de un CDN llamado https://cdnjs.com, y en su buscador escribimos la palabra hamburguer. Copiamos la URL de la hoja de estilos minificada y la pegamos en un link.
Nota: es un error de usabilidad poner los botones de hamburguesa en la parte de arriba, porque cuando usamos el móvil, vamos a acceder a dicho botón de mejor manera desde abajo.
La sintaxis de nuestro archivo menu-hamburguesa.html es la siguiente.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Ejercicios del DOM</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.2.1/hamburgers.min.css" /> <link rel="stylesheet" href="dom-ejercicios.css" /> </head> <body> <header class="header"> <h1>Ejercicios del DOM</h1> </header> <button class="panel-btn hamburger hamburger--vortex" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <aside class="panel"> <nav class="menu"> <a href="#seccion1">Sección 1</a> <a href="#seccion2">Sección 2</a> <a href="#seccion3">Sección 3</a> <a href="#seccion4">Sección 4</a> <a href="#seccion5">Sección 5</a> </nav> </aside> <main> <section id="seccion1" class="section"> <h2>Sección 1</h2> </section> <section id="seccion2" class="section"> <h2>Sección 2</h2> </section> <section id="seccion3" class="section"> <h2>Sección 3</h2> </section> <section id="seccion4" class="section"> <h2>Sección 4</h2> </section> <section id="seccion5" class="section"> <h2>Sección 5</h2> </section> </main> <script src="index_dom.js" type="module"></script> </body> </html>
La del archivo menu-hamburguesa.css sería la siguiente.
/* **** Reset CSS **** */
:root {
--main-font: sans-serif;
--font-size: 16px;
--main-color: #f7df1e;
--second-color: #222;
--main-modal-color: rgba(247, 222, 30, 0.85);
--second-modal-color: rgba(34, 34, 34, 0.85);
--container-width: 1200px;
}
html {
box-sizing: border-box;
font-family: var(--main-font);
font-size: var(--font-size);
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
}
/* **** Menú Hamburguesa **** */
.header {
position: sticky;
top: 0;
padding: 1rem;
background-color: var(--main-color);
color: var(--second-color);
}
.header h1 {
margin: 0 auto;
text-align: center;
}
.section {
padding: 2rem;
padding-top: 4rem;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: var(--container-width);
min-height: 100vh;
text-align: center;
}
.panel {
position: fixed;
z-index: 998;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background-color: var(--second-modal-color);
transition: transform 0.3s ease, opacity 0.5s ease;
/* De arriba */
transform: translate(0, -100%);
/* De abajo */
transform: translate(0, 100%);
/* De izda */
transform: translate(-100%, 0);
/* De dcha */
transform: translate(100%, 0);
/* Opacidad */
opacity: 0;
}
.panel.is-active {
transform: translate(0, 0);
opacity: 1;
}
.panel-btn {
position: fixed;
z-index: 999;
bottom: 1vh;
right: 1vw;
width: 4rem;
height: 4rem;
border-radius: 50%;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-color);
}
.menu {
width: inherit;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
.menu a {
padding: 2rem;
width: inherit;
display: block;
font-size: 1.5rem;
text-decoration: none;
color: var(--main-color);
transition: all 0.3s ease;
}
.menu a:hover {
font-weight: bold;
color: var(--second-color);
background-color: var(--main-modal-color);
}
La de nuestro archivo index_dom.js sería la siguiente.
import hamburguerMenu from "./menu_hamburguesa.js";
const d = document;
d.addEventListener("DOMContentLoaded", (e) => {
hamburguerMenu(".panel-btn", ".panel", ".menu a");
})
Y por último, nuestro archivo menu_hamburguesa.js contendría la siguiente sintaxis.
export default function hamburguerMenu(panelBtn, panel, menuLink) {
const d = document;
d.addEventListener("click", (e) => {
if(e.target.matches(panelBtn) || e.target.matches(`${panelBtn} *`)) {
d.querySelector(panel).classList.toggle("is-active");
d.querySelector(panelBtn).classList.toggle("is-active");
}
if(e.target.matches(menuLink)) {
d.querySelector(panel).classList.remove("is-active");
d.querySelector(panelBtn).classList.remove("is-active");
}
})
}