Cómo crear un menú horizontal en HTML y CSS

En esta sección del tutorial de CSS, aprenderemos cómo crear un menú horizontal en HTML y CSS. Un menú horizontal es una parte esencial de cualquier sitio web, ya que proporciona una navegación clara y fácil para los visitantes. Gracias a los estilos CSS podemos convertir una lista <ul> en un menú horizontal, en una galería de fotos u en otros elementos.

Contenidos del artículo

15. Cómo crear un menú horizontal en HTML y CSS

Veamos paso por paso cómo crear un menú horizontal desde cero mediante HTML y CSS.

Paso 1: Estructura HTML

Comencemos creando la estructura básica del menú en HTML. Usaremos una lista desordenada <ul> con elementos de lista <li> para crear los ítems del menú. Cada ítem del menú será un enlace <a> que llevará a diferentes páginas o secciones del sitio web.

<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>

Paso 2: Estilos CSS

Ahora que tenemos la estructura HTML, vamos a darle estilo al menú horizontal utilizando CSS. Queremos que el menú sea horizontal, quitar las viñetas y que los ítems estén alineados uno al lado del otro.

Para quitar las viñetas, usaremos la propiedad list-style-type:none; en la etiqueta <ul>.
Para alinear los ítems usaremos la propiedad display:inline; en las etiquetas li.

nav ul {
    list-style-type: none; /* Quitamos las viñetas de la lista */
}
nav li {
    display: inline; /* Ítems del menú en una línea horizontal */ 
}

Paso 3: Añadir colores y estilos personalizados al menú horizontal

Puedes personalizar los colores y estilos del menú para que se ajusten al diseño de tu sitio web. Por ejemplo, puedes cambiar el color de fondo del encabezado, los colores de los ítems del menú y los efectos de interacción al pasar el cursor sobre ellos.

De esta forma se consigue un menú horizontal completamente funcional y estilizado en tu sitio web. Puedes agregar más ítems o enlaces a medida que necesites, y con un poco más de CSS, puedes hacer que el menú sea aún más atractivo y fácil de usar para los visitantes. Veamos algunos ejemplos en CodePen:

Ejemplos de menú horizontal

Ejemplo en Codepen

A continuación se muestra un ejemplo muy básico de menú horizontal que modifica su apariencia cuando se pasa el cursor por encima.

Ejemplo en Codepen

En el siguiente ejemplo puedes ver una barra de navegación con logotipo bastante típica que puedes encontrar en cualquier web. Presta atención a que no se han utilizado clases, sólo se ha necesitado hacer uso de selectores etiqueta y selectores descendientes. Además fíjate que gracias al padding que se le ha incluido en los enlaces, serían perfectamente pulsables desde un dispositivo móvil.

Ejemplo en Codepen

En este ejemplo se puede apreciar un menú desplegable o dropdown menu. El menú contiene tres ítems principales: «Home», «Our services» (Nuestros servicios) y «Contact Us» (Contacto).

El ítem «Our services» tiene un submenú desplegable que se oculta inicialmente y se muestra al pasar el cursor sobre él. El submenú está representado por otra lista desordenada (<ul>) con un id «submenu». Dentro del submenú, hay tres elementos de lista (<li>) que contienen enlaces (<a>) con los nombres de los servicios ofrecidos.

Ejemplo en Codepen

En este caso, el menú llega a tener hasta cuatro niveles de profundidad, lo que permite organizar y presentar una gran cantidad de opciones de manera jerárquica. Cada nivel de profundidad se representa mediante listas desordenadas anidadas dentro de otras listas, creando una estructura de árbol para la navegación del menú.

Recuerda siempre mantener un diseño limpio y sencillo para una mejor experiencia del usuario, así como de revisar el contraste entre el fondo y el texto. Además, asegúrate de dar un estilo diferente a los elementos pulsables cuando se les pasa el cursor por encima.

Comprueba tu aprendizaje