Cómo hacer un menú horizontal en HTML: Guía fácil

Como la práctica hace al maestro, hoy te traigo una guía fácil con la que podrás hacer un menú horizontal en HTML y así ir mejorando tus habilidades en el desarrollo web. Este es uno de esos aprendizajes que te servirá para toda la vida, porque los menús horizontales se usan en todos los sitios web, así que sí o sí debes aprender a crearlos. Además, es realmente sencillo si sigues el paso a paso.

Menú horizontal en HTML: Ahorra espacio en tus sitios web

En caso de que no lo sepas, un menú horizontal es una barra de navegación donde debes organizar los enlaces de navegación uno al lado del otro. Como te decía, se usa mucho porque sirve para ahorrar espacio vertical y la experiencia de usuario se vuelve más intuitiva. Lo grandioso es que, con este tipo de menús, mejorarás la estructura de tu sitio, reforzarás tu comprensión de HTML y CSS y lo podrás personalizar según tus necesidades.

¿Cómo hacer un menú horizontal en HTML?

Construye la estructura básica en HTML

Lo primero que debes hacer es construir la estructura del menú. De modo que, vas a usar una lista desordenada (<ul>) con elementos de lista (<li>) para organizar los ítems del menú.

Ten en cuenta que, cada elemento será un enlace (<a>), que dirigirá a diferentes secciones de tu sitio.

Así es como se vería el código base para tu menú horizontal en HTML:

<header>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Portafolio</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>

Si observas bien, lo que hace este fragmento de código es definir una lista de enlaces que serán los elementos del menú HTML, pero ¿Cómo lo volvemos horizontal?

Estiliza el menú horizontal con CSS

Como ya tienes la estructura HTML lista, ahora sí puedes aplicarle estilos CSS para convertirlo en un menú horizontal en HTML. Hazlo así:

1. Quita las viñetas de la lista

Como las listas desordenadas muestran viñetas, tienes que eliminarlas usando la propiedad list-style-type: none; en el selector <ul>:

nav ul {
    list-style-type: none; /* Quitamos las viñetas */
    padding: 0;
    margin: 0;
}

2. Alinea los elementos en una sola fila

Utiliza la propiedad display: inline; en los elementos <li> para que se dispongan uno al lado del otro:

nav li {
    display: inline; /* Los elementos están en una línea horizontal */
    margin-right: 20px; /* Espaciado entre ítems */
}

3. Aplica estilos personalizados a los enlaces

Lo divertido de esto, es que te deja personalizar el color de los enlaces, quitar el subrayado y añadir efectos al pasar el cursor:

nav a {
    text-decoration: none; /* Quitar subrayado */
    color: #000; /* Color del texto */
    padding: 5px 10px; /* Espaciado interno */
    transition: background-color 0.3s; /* Suavizar el cambio de fondo */
}

nav a:hover {
    background-color: #ddd; /* Color de fondo al pasar el cursor */
    border-radius: 5px; /* Bordes redondeados */
}

Ejemplos prácticos y personalización de un menú horizontal en HTML

Con el diseño básico ya hecho, te recomiendo personalizarlo según las necesidades de tu proyecto. Te dejo estos ejemplos para que te fluya la inspiración:

Ejemplo 1: Menú con fondo y estilos modernos

Puedes agregar un fondo al menú para que destaque:

header {
    background-color: #f4f4f4; /* Fondo del menú */
    padding: 10px 0;
}

Ejemplo 2: Menú centrado en la pantalla

Si quieres centrar el menú horizontalmente, añade esta propiedad al <ul>:

nav ul {
    display: flex;
    justify-content: center; /* Centrar ítems */
}

Ejemplo 3: Menú desplegable (dropdown)

Si necesitas un submenú que aparezca al pasar el cursor, aquí tienes un ejemplo:

<li>
    <a href="#">Servicios</a>
    <ul>
        <li><a href="#">Diseño Web</a></li>
        <li><a href="#">SEO</a></li>
        <li><a href="#">Marketing</a></li>
    </ul>
</li>

Con este CSS puedes hacer que el submenú se oculte inicialmente y aparezca al interactuar:

nav li ul {
    display: none; /* Ocultamos el submenú */
    position: absolute; /* Posición flotante */
}

nav li:hover ul {
    display: block; /* Mostramos el submenú al pasar el cursor */
}

Consejos para que tu menú horizontal en HTML funcione bien:

1. Mantén un diseño limpio: Usa colores que contrasten y asegúrate de que los enlaces sean legibles.
2. Hazlo responsive: Utiliza CSS Media Queries para adaptar el menú a dispositivos móviles.
3. Asegura la usabilidad: Añade suficiente espaciado entre los enlaces para que sean fáciles de pulsar, especialmente en pantallas táctiles.

Ya tienes claro cómo hacer un menú horizontal en HTML y la importancia de este. Recuerda que, aunque parecen muy simples, los menús son super importantes a la hora de construir sitios web modernos y que funcionen bien.

Mejora significativamente tus habilidades y crea interfaces web impresionantes con el Bootcamp de Desarrollo Web de KeepCoding. En pocas semanas, dominarás las herramientas más demandadas del sector IT y estarás listo para transformar tu carrera profesional. ¡Empieza hoy!