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.
14. 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.
14.1. 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>
14.2. 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 etiquetasli.
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 */
}
14.3. 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:
14.4. Ejemplos de menú horizontal usando CSS tradicional
14.4.1. Ejemplo práctico de menú horizontal con CSS tradicional
A continuación se muestra un ejemplo muy básico de menú horizontal que modifica su apariencia cuando se pasa el cursor por encima.
14.4.2. Ejemplo práctico de menú horizontal con CSS tradicional
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.
14.4.3. Ejemplo práctico de menú con CSS tradicional
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.
14.4.4. Ejemplo práctico de menú con CSS tradicional
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.
14.5. Ejemplos de menú usando Flexbox
Aunque se trata de CSS avanzado, si te apetece puedes consultar cómo hacer un menú horizontal mediante un modelo de caja flexible en los ejemplos que puedes encontrar al final de la sección del tutorial de Flexbox. A continuación se muestran algunos ejemplos:
14.5.1. Ejemplo práctico de menú horizontal con Flexbox
Encabezado que tiene un elemento a la izquierda (texto o imagen) y otro a la derecha (menú de navegación).
Para este ejercicio se utiliza un contenedor principal <header> y se distribuye el espacio de los elementos contenidos con justify-content: space-between. Los elementos del menú de navegación se establecen de tipo flex para alineación horizontal uno detrás del otro.
14.5.2. Ejemplo práctico de menú horizontal con Flexbox
Encabezado que tiene un elemento arriba (texto o imagen) y otro abajo (menú de navegación). Ambos elementos se encuentran centrados.
Para este ejercicio se utiliza un contenedor principal <header> y se alinean verticalmente sus elementos hijos con flex-direction: column. Los elementos del menú de navegación se establecen de tipo flex para alineación horizontal uno detrás del otro.
14.5.3. Ejemplo práctico de menú horizontal con Flexbox
Menú de navegación que ocupa el ancho total de la pantalla y que sus elementos crecen para ocupar de forma uniforme el ancho total.
Para este ejercicio utilizamos la propiedad flex-grow para que los elementos del menú crezcan hasta ocupar el ancho total del menú de navegación.
14.6. Ejemplos de menú con transiciones y transformaciones
Aunque llegados a este punto aún no hemos estudiado transiciones y transformaciones, a continuación se muestran unos ejemplos de los que podremos hacer en próximas sesiones:
14.6.1. Ejemplo de menú con transiciones
Menú con transiciones:
14.6.2. Ejemplo de menú con transiciones
Menú con transiciones:
Comprueba tu apendizaje