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

Uno de los primeros problemas que encontramos cuando nos ponemos a implementar nuestras primeras webs es como hacer un menú horizontal con HTML y CSS. En realidad es más fácil de lo que parece, solo debes tener en cuenta los pasos que hay que seguir.

En este pequeño tutorial te voy a enseñar como puedes hacer un menú horizontal responsive utilizando sólo HTML, CSS y un poco de JavaScript.

Como resultado, tendremos un menú responsive, es decir que se verá bien tanto en escritorio como en dispositivos móviles, en horizontal y en formato de cajas que podrás decorar en CSS como prefieras.

Para ello, sigue los pasos que te pongo en esta imagen y que te explico a continuación!

▶︎ Si prefieres saltarte la explicación y directamente ver la solución final, pincha aquí.

▶︎ Además, si estás aprendiendo a utilizar HTML y CSS, te recomiendo el siguiente libro sobre el tema:

▶︎ Por otro lado, si lo que quieres es descargar directamente el código, lo tienes en esta página de github!

Crear menú de navegación

Para ello, debemos utilizar la etiqueta <nav>. No es estrictamente necesario, el resultado será similar con un <div>, ya que lo que necesitamos es un contenedor.

Pero debes tener en cuenta que utilizar correctamente las etiquetas html que tenemos disponibles es algo prácticamente indispensable si queremos hacer una página web real.

Google valora positivamente y es capaz de comprender mejor todas aquellas páginas que utilizan correctamente las etiquetas existentes. Por eso, lo mejor es que para crear el menú de navegación utilices la etiqueta html correspondiente: <nav>.

La etiqueta <nav>

Si vamos por la definición de libro de la etiqueta <nav>, con ella, simplemente haría falta incluir los enlaces a los diferentes elementos del menú, con algo tal que así en nuestro fichero HTML:

<nav>
    <a href="#">Item</a>
    <a href="#">Item</a>
    <a href="#">Item</a>
</nav>

Es importante utilizar la etiqueta <nav> ya que pertenece a HTML5 y es una buena práctica para que los rastreadores de google entiendan como funciona nuestra web.

Pero para que funcione en todos los navegadores, la mejor solución es utilizar las listas.

Crear una lista HTML

Tengo que decirte que no es oro todo lo que reluce, y el último código que te enseñé no funciona para todos los navegadores.

Por tanto, la solución más utilizada para que nuestro menú sea visible (y bien) en todos los navegadores y dispositivos es la siguiente:

<nav>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</nav>

Básicamente, se trata de crear una lista con componentes que son enlazables a las diferentes URLs a las que queremos dirigir en nuestro menú.

Las etiquetas <ul> y <li>

Para crear una lista, utilizamos la etiqueta <ul> que hace referencia al elemento unordened list y nos permite crear una lista sin enumerar.

Cada elemento de la lista (list item) se crea con la etiqueta <li>.

Añadir enlaces a la lista

Para añadir enlaces a la lista debemos utilizar el elemento <a>, que hace referencia a los enlaces que generamos: a donde queremos que se dirijan y atributos asociados.

<nav>
    <ul>
        <li><a href="#seccion-1">item1</a></li>
        <li><a href="#seccion-2">item1</a></li>
        <li><a href="#seccion-3">item1</a></li>
        <li><a href="#seccion-4">item1</a></li>
        <li><a href="#seccion-5">item1</a></li>
    </ul>
</nav>

La etiqueta <a>

La etiqueta <a> tiene el atributo href, donde debemos colocar la URL a la que queremos dirigirnos cuando se pulse el enlace.

Además, también se pueden añadir otros atributos de interés:

• rel. Con el atributo rel=nofollow podemos configurar el enlace para que no traspase PageRank a otra página web.
• target. El atributo target=_blank nos permite que el enlace se abra en una pestaña nueva. Esto en principio no nos interesa para un menú, pero puede ser útil para otros casos de uso.

Estilos para el menú HTML horizontal

Hasta el paso anterior, tenemos lista la funcionalidad del menú, pero de momento no es horizontal, de hecho es una lista vertical sin más.

Para que el menú se parezca a un menú horizontal típico, debemos darle una serie de estilos. Lo más importante para que se parezca a lo que queremos es lo siguiente:

1. Eliminar los puntos que indican el inicio de cada elemento de la lista. Para ello, en el elemento <ul> de la lista, debemos especificar el estilo css list-style:none.
2. Distribuirlo de forma horizontal. Este paso puede realizarse de diferentes maneras. Una de las mejores opciones, y adaptable independiente del número de elementos que haya en el menú es utilizar el atributo display:flex en el elemento <ul>. Para especificar la manera en la que se colocan los items de la lista, será necesario incluir en los estilos de los elementos <li> el atribujo float:left. Para evitar que los últimos items del menú se muevan a la siguiente fila, debemos incluir en el elemento <ul> el atributo justify-content: center.
3. Aplicar otros estilos: colores, tipos de letra, márgenes y paddings.

Hagamos el menú HTML Horizontal Responsive!

Tal y como está ahora mismo, tenemos un menú perfectamente válido para escritorio o tableta.

Ahora bien, si queremos adaptarlo a teléfonos móviles, debemos utilizar media queries. Si nunca has usado media queries, no te preocupes. En este caso, simplemente debemos especificar a partir de qué tamaño de pantalla queremos que se vea el icono del menú y hacerlo desplegable.

Además, necesitaremos una fuente o imagen para representar nuestro menú desplegable. Para este ejemplo, voy a utilizar el icono navitagion-menu de esta web. En la propia web nos especifican como debemos utilizar la imagen en nuestro código, así que vamos a ello.

Primero: mostrar icono en HTML

Lo primero que tenemos que hacer es crear un contenedor donde vamos a incluir el icono. Para ello, utilizaremos la etiqueta <div> y dentro añadiremos lo que nos indican que debemos añadir en la web donde descargamos el icono: <i class="icofont-navigation-menu"></i>.

Con esta última etiqueta, podemos visualizar el icono pero no ocurrirá nada si pulsamos. Por eso, debemos convertirlo en un enlace.

En este caso, el enlace no nos va a llevar a ningún sitio, solo va a activar el menú desplegable en la página actual, por eso la dirección del enlace será '#'. De esta forma, tendremos algo así en nuestro HTML:

<div class="menu">

    <a href='#'>
        <i class="icofont-navigation-menu"></i>
    </a>

</div>

Segundo: configurar CSS

Una vez tenemos la estructura en HTML lista, debemos darle forma con el CSS. Para empezar, debemos ocultar el icono de menú para las pantallas grandes, ya que en este formato veremos el menú completo. Luego, debemos configurar todo para: ocultar el menú en vista de móvil y ponerlo en vertical.

Primero: Ocultar icono de menú en vista de escritorio

Para ello, utilizaremos la clase que especifiqué en el ejemplo anterior: menu. Así, en nuestro CSS tendremos:

.menu{
    display: none;
}

Segundo: Ocultar menú en vista de móvil y visualizar icono de menú

Cuando la pantalla cambia de vista de escritorio a vista de smartphone deben ocurrir dos cosas de forma paralela:

• El icono de menú debe aparecer y posicionarse en su sitio.
• El menú debe cambiar de orientación (de horizontal a vertical) y esconderse hasta que pulsemos el botón de menú.

Para esto tendremos que utilizar las media queries. Con las media queries podremos seleccionar una condición en el CSS para especificar en qué momento concreto queremos que se activen los estilos.

En este caso concreto, queremos que cuando la pantalla sea del tamaño de un dispositivo móvil podamos configurar los dos puntos que te he comentado hace un momento. Para ello, usamos la media query:

@media screen and (max-width: 800px) and (min-width: 100px) { estilos }

En este caso, especifiqué que los estilos se apliquen en pantallas que tengan un máximo de 800 px de ancho y un mínimo de 100px de ancho. Por lo general, las medidas típicas de los diferentes dispositivos suelen estar en los siguientes rangos:

• 320px  -  480px ➢ dispositivos móviles
• 481px  -  768px ➢ tablets
• 769px  -  1024px ➢ portátiles y pantallas pequeñas
• 1025px  - 1200px ➢ Escritorio típico, monitores
• 1201px and more ➢ Televisores o pantallas extra largas

Si la aplicación web que quieres hacer es personalizada para un uso concreto puedes establecer unas medidas concretas que funcionen bien para el dispositivo en el que se vaya a utilizar. Si no es el caso, puedes tomar las medidas que te he puesto como guía.

En la media query debemos especificar los puntos comentados anteriormente: que aparezca el icono de menú y que los elementos del menú se oculten y se coloquen de forma vertical.

Para ello, añadiremos los siguientes estilos:

@media screen and (max-width: 800px) and (min-width: 100px) { 
    
    .menu{
        display: block;
        width: 100%;
    }

    nav {
        width:50%;
        height:100%;
        left:-100%;
        margin:0;
        position: fixed;
                
    }

    nav > ul {
        display: block;
    }

    nav > ul > li {
        display:block;
        float:none;
    }

    .menu > a {
        display:block;
    }


}

Queremos que el elemento .menu sea visible, por eso aplicamos el estilo display:block. Además, el menú de navegación (nav) queremos que tenga la disposición habitual de los menús en móviles: que ocupe la mitad de la pantalla y todo el alto, con una posición fija PERO inicialmente movido un 100% a la izquierda.

El motivo de que lo escondamos moviéndolo a la izquierda es para crear el efecto de movimiento cuando pulsemos el icono del menú, ya que haremos que se desplace hacia la derecha, hasta que se vea el menú completo.

Tercero: Configurar JavaScript para manejar comportamiento

Por último, tenemos que manejar la lógica de que al pulsar el icono del menú en el móvil, se mueva el menú y podamos visualizarlo.

Para ello, necesitaremos programar un pequeño fragmento de código en JavaScript. Concretamente utilizaremos las siguientes líneas, que te explico a continuación:

$(document).ready(main);

var contador = 0;

function main(){
	$('.menu').click(function(){
		contador = (contador + 1)%2
		if(contador == 1){
			$('nav').animate({
				left: '0'
			});
			
		} else {
			
			$('nav').animate({
				left: '-100%'
			});
		}
	});
};

Para empezar, vamos a crear la función main() y vamos a usar una variable contador como elemento auxiliar. La idea es que:

• Si contador = 1 ➢ Se ha pulsado el botón de menú y debe cambiarse al estado visualizarse.
• Si contador = 0 ➢ Se ha pulsado el botón de menú y debe cambiarse al estado oculto

Para llevar una cuenta del valor del contador utilizamos la operación módulo (%) que sirve para devolver el resto de una división, o lo que es lo mismo contar números en el módulo especificado. Concretamente la operación x % 2 hace que el valor resultante sea 1 si es impar y 0 si es par.

Básicamente utilizamos la variable contador como un estado que se representa en 0 para ocultar el menú y en 1 para hacerlo visible.

Para activar la función, se especifica que debe hacerse click sobre el elemento menu ($('.menu').click(function() ..... )) qué es como hemos llamado al icono. Por tanto, cuando se haga click, lo primero que ocurrirá es que se establecerá el estado del contador (siguiendo las directrices anteriores) y después se procede a comprobar el valor que tiene dicho contador utilizando las sentencias if.

En el caso de que el valor de contador sea 1 (es decir, pulsamos el icono de menú y queremos visualizarlo) debemos mover el menú a la posición 0 (recuerda que estaba en la posición -100%) y realizarlo en forma de animación.

En el caso de que el valor de contador sea 0, quiere decir que queremos ocultar el menú, por tanto debemos animar el movimiento a la posición left:-100%, igual que estaba al inicio.

Con esto, tendremos listo el comportamiento de nuestro menú horizontal responsive con HTML, CSS y JavaScript.

Resultado Final

En nuestro fichero HTML, utilizando el icono navitagion-menu de esta web, tendremos que especificar el menú de la siguiente manera:

<div class="menu">

    <a href='#'>
        <span class="icofont-navigation-menu"></span>
    </a>

</div>

<nav>
    <ul>
        <li><a href="#seccion-1">item1</a></li>
        <li><a href="#seccion-2">item1</a></li>
        <li><a href="#seccion-3">item1</a></li>
        <li><a href="#seccion-4">item1</a></li>
        <li><a href="#seccion-5">item1</a></li>
    </ul>
</nav>

Nuestro fichero CSS debe contar con los siguientes estilos:

.menu{
    display: none;
}

@media screen and (max-width: 800px) and (min-width: 100px) { 
    
    .menu{
        display: block;
    }

    nav {
        width:50%;
        height:100%;
	left:-100%;
	margin:0;
	position: fixed;
                
    }


}

Y, finalmente, debemos tener un fichero JavaScript con las siguientes líneas:

$(document).ready(main);

var contador = 0;

function main(){
	$('.menu').click(function(){
		contador = (contador + 1)%2
		if(contador == 1){
			$('nav').animate({
				left: '0'
			});
			
		} else {
			
			$('nav').animate({
				left: '-100%'
			});
		}
	});
};

Preguntas frecuentes

▶︎ Error Uncaught ReferenceError: $ is not defined al intentar usar nuestro fichero javascript

Entre las líneas de <head> y </head> de tu fichero HTML, introduce:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

▶︎ Para configurar el icono correctamente

Debes descargar el fichero icofont.zip en de esta web e introducir dentro del <head>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="icofont/icofont.min.css">

Además, para utilizar el icono, debes usar las guías de la web, en este caso:

<i class="icofont-navigation-menu"></i>

Un menú horizontal responsive con HTML y CSS código es una forma efectiva de crear un menú de navegación que se adapte a diferentes dispositivos y tamaños de pantalla. Al utilizar media queries y técnicas de diseño responsivo, el menú se ajusta automáticamente para garantizar una experiencia óptima para el usuario. Con este código, puedes crear un menú que se vea bien en todos los dispositivos, desde computadoras de escritorio hasta teléfonos móviles.

Cómo hacer un menú en HTML: Para crear un menú horizontal en HTML, puedes utilizar la etiqueta <ul> para definir una lista no ordenada y luego utilizar la etiqueta <li> para cada elemento del menú. Aplica estilos CSS para darle formato y posición al menú.