Menú cortina (courtain Menu)

Creación de un menú cortina con HTML, CSS y JS nativo

Vamos a aprender a crear un menú cortina que aparecerá de izquierda a derecha o de derecha a izquierda al hacer clic sobre un icono hamburguesa.

Para el icono del menú hamburguesa o también llamado menú de barras usaremos el símbolo unicode ≡ equivalente al símbolo ≡ y para el icono de cierre de menú usaremos el código 🞪 equivalente al símbolo ?.

Código HTML

El código HTML es muy sencillo, creamos la etiqueta semántica <nav> con la clase «menu» y dentro pondremos los ítems de menú. En el ejemplo, los ítems de menú están dentro de una estructura de lista no ordenada. Dentro de la etiqueta <nav> también incluiremos la etiqueta span para el cierre de menú.

La etiqueta el línea <span> donde incluiremos el símbolo unicode del menú hamburguesa ha de estar fuera de la etiqueta <nav> y podemos ponerla donde queramos: por ejemplo encima, debajo o dentro de la etiqueta semántica <header>.

<span id="burger">&#8801;</span>
<nav class="menu">
    <span id="closeMenu">&#128938;</span>
    <ul>
        <li>Home</li>
        <li>Services</li>
        <li>About</li>
        <li>Contact</li>
     </ul>
</nav>

Código CSS

El código CSS es sencillo y va a ser la clave en la aparición y desaparición del menú.

Se trata de poner un menú posicionado de forma fija para que ocupe todo el body. Para ello pondremos el menú pegado a la parte superior e inferior del body con un top y bottom 0 respectivamente, también le daremos un width del 100% para que el menú ocupe todo el ancho de la pantalla y seguidamente, lo ocultaremos con un left: -100%; para que no se vea hasta que el usuario haga clic en el menú hamburguesa, momento en el que se añadirá mediante JS, la clase openMenu a la etiqueta <nav> haciendo que left pase a ser 0 por lo que el usuario verá cómo aparece el menú de izquierda a derecha con una transición de medio segundo.

#burger, #closeMenu {
    font-size: 3rem;
    font-weight: bolder;
    cursor: pointer;
    user-select: none;
} 
.menu {
    background-color: black;
    color: white;
            
    /*Posicionamos el menú*/
    position: fixed;
    top: 0;
    bottom: 0;
    left: -100%;

    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    text-align: right;
    transition: .5s;   
}
.menu li {
    text-align: left;
    list-style: none;
    font-size: 2rem;
    margin: 20px 0;
}
.openMenu {
     left: 0;         
}

Si hay algo que no entiendes bien puedes seguir de forma gratuita nuestro curso completo de CSS

Código JavaScript

El código JavaScript es lo más sencillo simplemente almacenamos en constantes los elementos del documento (DOM) que van a tomar partido en el programa:

• El icono de menú hamburguesa como evento de clic para abrir el menú
• El icono de cierre de menú como evento de clic para cerrar el menú
• El <nav> que será al que añadiremos la clase openMenu mediante JS

El funcionamiento es sencillo, para agregar y quitar la clase openMenu que hemos creado previamente en el código CSS a la etiqueta <nav> usamos el método toggle que quiere decir algo así como conmutador sobre las clases que tiene <nav> añadiendo la clase openMenu si no existe y quitándola si existe. Para ello hemos creado la función toggleMenu()

<script>
        //CAPTURA DOM
        const burger = document.getElementById('burger');
        const menu = document.querySelector('.menu');
        const closeMenu = document.getElementById('closeMenu');
        
        //EVENTS
        burger.addEventListener('click', toggleMenu);
        closeMenu.addEventListener('click', toggleMenu);
        
        //MENU TOGGLE
        function toggleMenu() {
            menu.classList.toggle('openMenu');
        }
 </script>