Crear una Barra de Navegación con HTML y CSS: Simple y Elegante

Una barra de navegación es un elemento esencial para cualquier sitio web. Ya seas principiante o busques perfeccionar tus habilidades, este artículo te guiará para crear una barra de navegación sencilla, elegante y adaptable.

Construcción de la Barra de Navegación con HTML

Comienza estructurando la barra de navegación con HTML básico. Aquí tienes un ejemplo:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barra de Navegación</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">MiSitio</div>
        <ul class="nav-links">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Portafolio</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>
</body>
</html>

Explicación del Código:

La barra de navegación está contenida dentro de una etiqueta <nav>.
El logo es un simple div.
Los enlaces de navegación están agrupados en una lista desordenada (<ul>).
Se añade un icono de menú (hamburger) para el menú adaptable.

Estilización con CSS

Crea un archivo styles.css y añade los siguientes estilos para hacer la barra de navegación más atractiva visualmente.

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 0.5em 1em;
    color: white;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1em;
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #00bcd4;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
}

Explicación del CSS:

La barra de navegación está diseñada con display: flex para una disposición horizontal.
Los enlaces tienen un efecto hover que cambia su color.
El icono de menú está diseñado pero permanece oculto en pantallas más grandes.

Añadir un Menú Adaptable

Para que la barra de navegación se adapte a pantallas más pequeñas, añade estos estilos al archivo CSS:

CSS

@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        right: 0;
        width: 100%;
    }

    .nav-links.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }
}

Luego, añade un poco de JavaScript para activar el menú hamburger:

JSX

<script>
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });
</script>

Explicación:

Los estilos adaptables ocultan los enlaces de navegación por defecto en pantallas más pequeñas.
JavaScript alterna una clase .active para mostrar el menú cuando se hace clic en el icono hamburger.

Conclusión

Con estos pasos simples, has creado una barra de navegación que es elegante y funcional. Se adapta a todos los dispositivos y ofrece una experiencia de usuario fluida. ¡Empieza ahora y personalízala según tus necesidades!