Diseña tu Menú Hamburguesa con HTML + CSS + Javascript

por
Tiempo de lectura: 2 minutos

Los menús hamburguesa se han convertido en un elemento esencial en el diseño web moderno. Son una excelente forma de mantener la navegación limpia y organizada en dispositivos móviles y pantallas pequeñas. En este tutorial, te mostraremos cómo crear un menú hamburguesa desde cero utilizando HTML, CSS y JavaScript. Prepárate para darle a tu sitio web un toque moderno e interactivo.

Requisitos

Para seguir este tutorial, necesitarás tener conocimientos básicos de HTML, CSS y JavaScript. Si eres nuevo en estos lenguajes, no te preocupes, ¡este tutorial es un gran punto de partida para aprender!

Paso 1: Configuración del Proyecto

Comencemos creando la estructura básica del proyecto. Crea un archivo HTML llamado index.html y agrega el siguiente código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Menú Hamburguesa</title>
</head>
<body>
    <!-- Tu contenido principal aquí -->
    <div class="menu-toggle">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <nav class="navbar">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <div class="overlay"></div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Estilizando con CSS

Agreguemos estilos para darle vida a nuestro menú hamburguesa. Crea un archivo CSS llamado style.css y copia el siguiente código:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 3px 0;
    border-radius: 5px;
}

.navbar {
    background: #333;
    color: #fff;
    position: fixed;
    width: 250px;
    top: 0;
    left: -250px;
    height: 100%;
    padding-top: 60px;
    transition: left 0.3s;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar li {
    padding: 15px;
}

.navbar a {
    text-decoration: none;
    color: #fff;
}

.overlay {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

Estos estilos crearán un aspecto atractivo para tu menú hamburguesa.

Paso 3: Interactividad con JavaScript

Agreguemos interactividad al menú hamburguesa. Crea un archivo JavaScript llamado script.js y copia el siguiente código:

const menuToggle = document.querySelector('.menu-toggle');
const navbar = document.querySelector('.navbar');
const overlay = document.querySelector('.overlay');

menuToggle.addEventListener('click', () => {
    navbar.classList.toggle('active');
    overlay.style.display = 'block';
});

overlay.addEventListener('click', () => {
    navbar.classList.remove('active');
    overlay.style.display = 'none';
});

Este código permite que el menú hamburguesa se abra y cierre con un clic y muestra un fondo semitransparente para enfocar la atención del usuario.

Paso 4: ¡Prueba Tu Menú Hamburguesa!

Abre tu archivo index.html en tu navegador y disfruta de tu nuevo menú hamburguesa interactivo.

Conclusión

¡Enhorabuena! Ahora tienes un menú hamburguesa funcional para tu sitio web. Puedes personalizarlo y mejorar su diseño de acuerdo a tus necesidades. Los menús hamburguesa son un elemento esencial en el diseño web responsivo y con estos conocimientos, puedes llevar tus proyectos web al siguiente nivel.

¡Gracias por seguir este tutorial! Si te gustó, no dudes en compartirlo con otros programadores que puedan encontrarlo útil. ¡Feliz codificación!

Post Views: 111

Deja un comentario