¡Hola Girl! En esta entrada te mostramos cómo hacer un menú lateral responsivo con ayuda de JavaScript. ¿Quieres aprender como hacerlo? Sigue leyendo este post.
En este post te mostraremos el código HTML para crear un menú lateral que luzca bonito y profesional para tus proyectos web.
También te mostraremos el código JavaScript para desplegar / colapsar nuestro menú.
Al terminar este ejercicio tendrías un menú como este:
Sin tanto preámbulo veamos el código y aprendamos a hacer nuestros propios menús laterales con todo el ⚡ POWER.
Tabla de Contenido
Estructura HTML
Ubica tu etiqueta <body> y defínele el ID body-pd (es importante, ya que lo usaremos más adelante).
Comenzaremos definiendo la estructura HTML del menú lateral, después de tu etiqueta <body> incluyes el siguiente código.
<header class="header" id="header">
<div class="header_toggle"> <span class="material-icons" id="header-toggle"></span> </div>
<div class="header_img"> <img src="img/user.JPG" alt=""> </div>
</header>
<div class="l-navbar" id="nav-bar">
<nav class="nav">
<div class="items-nav">
<a href="dashboard" class="nav_logo"> <span class="material-icons nav_logo-icon"></span> <span class="nav_logo-name">Girl Power in Code</span> </a>
<div class="nav_list">
<a href="dashboard" title="Dashboard" class="nav_link <?php if ($page == 'dashboard') echo 'active' ?>"> <span class="material-icons nav_icon"></span> <span class="nav_name">Dashboard</span> </a>
<a href="exercise3" title="Exercise 3" class="nav_link <?php if ($page == 'exercise3') echo 'active' ?>"> <span class="material-icons nav_icon"></span> <span class="nav_name">Exercise 3</span> </a>
<a href="exercise4" title="Exercise 4" class="nav_link <?php if ($page == 'exercise4') echo 'active' ?>"> <span class="material-icons nav_icon"></span> <span class="nav_name">Exercise 4</span> </a>
<a href="exercise5" title="Exercise 5" class="nav_link <?php if ($page == 'exercise5') echo 'active' ?>"> <span class="material-icons nav_icon"></span> <span class="nav_name">Exercise 5</span> </a>
</div>
</div>
<a href="logout.php" title="Cerrar Sesión" class="nav_link"> <span class="material-icons nav_icon"></span> <span class="nav_name">Cerrar sesión</span> </a>
</nav>
</div>Iniciamos creamos una header superior, en el cual incluiremos el icono para mostrar / ocultar el menú lateral, lo identificaremos con el ID header-toggle (recuérdala porque la usaremos más adelante) y también incluimos una imagen de perfil.
Es muy importante que incluyas las clases y IDs que sugerimos para que al final el resultado sea el mismo.
A continuación definimos el contenedor principal del menú y lo identificaremos con el ID nav-bar el cual encapsulara una estructura nav.
Dentro de items-nav iremos incluyendo todas las opciones que aparecerán en el menú.
Para este ejemplo mostramos inicialmente un logo/ nombre del proyecto y enseguida dentro de nav_list todos los enlaces del menú.
Como observas para cada enlace comparamos si la variable $page es igual a su respectivo enlace, con esto validamos si lleva o no la clase active, que se usa para resaltar la página seleccionada.
Para obtener el valor de $page en la parte superior de cada una de tus páginas debes incluir el siguiente código:
$actual_link = $_SERVER['REQUEST_URI'];
$page = explode('/', $actual_link);
$page = $page[2];Funcionalidad con JS
Ahora veamos el código JavaScript para el funcionamiento de mostrar / ocultar el menú cuando se da clic sobre el icono de hamburguesa.
document.addEventListener("DOMContentLoaded", function(event) {
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
});
function showNavbar(toggleId, navId, bodyId, headerId) {
var toggle = document.getElementById(toggleId);
var nav = document.getElementById(navId);
var bodypd = document.getElementById(bodyId);
var headerpd = document.getElementById(headerId);
// Validate that all variables exist
if (toggle && nav && bodypd && headerpd) {
toggle.addEventListener('click', () => {
// show navbar
nav.classList.toggle('shownav')
// change icon
if (nav.classList.contains('shownav')) {
toggle.innerHTML = ('')
} else {
toggle.innerHTML = ('')
}
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}Una vez que el documento termina de cargar llamamos la función showNavbar que explicaremos más adelante.
Observa que enviamos 4 parámetros:
header-toggle: Es el ID que asignamos al icono de mostrar el menú dentro del header.
nav-bar: Es el ID que asignamos al contenedor principal de nuestro menu.
body-pd: Este el ID que se definió en la etiqueta <body>.
header: Es el ID que se asignó al header principal.
Si usaste otros IDs simplemente ubica el elemento al cual nos referimos y envía tu ID.
Dentro de la función showNavbar comenzamos guardando cada elemento en una variable.
Enseguida definimos que cuando se haga clic sobre el elemento toggle se agregue la clase shownav al elemento nav.
Como su nombre lo indica se mostraría el menú desplegado, más adelante veremos la definición de la clase shownav.
Si el elemento nav tienen la clase shownav se muestra el icono de una X que hace referencia a colapsarlo, de lo contrario se vuelve a mostrar el icono de hamburguesa.
Finalmente, agregamos un padding a los elementos bodypd y headerpd, más adelante te mostramos el estilo que utilizamos.
Estilo de menú
A continuación te mencionamos el estilo de las clases usadas dentro de JavaScript para el funcionamiento de mostrar/ocultar el menú.
Puedes encontrar el código completo de este proyecto directamente en el repositorio de Girl Power In Code.
.shownav {
left: 0;
}
.body-pd {
padding-left: calc(var(--nav-width) + 1rem)
}
@media screen and (min-width: 768px) {
.l-navbar {
left: 0;
padding: 1rem 1rem 0 0
}
.shownav {
width: calc(var(--nav-width) + 156px)
}
.body-pd {
padding-left: calc(var(--nav-width) + 188px)
}
}¿Qué te pareció este ejemplo? ¿Tuviste alguna duda? Puedes dejarnos tus comentarios en la parte de abajo.
Recuerda compartir este post en tu red social favorita para que más chicas aprendan como hacer un menú lateral totalmente responsivo.
¡Hasta Pronto! 🙋♀️
