Cómo hacer un menú de navegación en HTML

Autor: | Última modificación: 9 de mayo de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post: ,

En este post vas aprender a hacer un menú de navegación en HTML. Sin duda alguna, la calidad estética y funcional de un menú de navegación determinan si un usuario continúa en la página o por el contrario sale al instante y, por este motivo, es tan importante hacer un menú de navegación en HTML atractivo y útil.

Listas en HTML

Para empezar debes conocer las etiquetas de lista, que te permiten crear el menú de navegación fácilmente.

Existen dos tipos de listas: ordenadas y no ordenadas. Para el menú, trabajaremos con las últimas. La etiqueta de lista no ordenada es <ul></ul> y cada elemento de lista debe escribirse con la etiqueta <li>. Aplicando lo anterior, el código quedaría así:

			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Tutoriales</a></li>
				<li><a href="#">Cursos</a></li>
				<li><a href="#">Bootcamps</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>

Como puedes vero, la etiqueta <li> incluye un enlace, que debe ser el de la página especificada en el menú.

Cómo hacer un menú de navegacion en HTML

Ya tienes la estructura básica del menú (los elementos o páginas del menú). Ahora, empezamos a darle forma al código. Vamos a usar la etiqueta de HTML5 para los menús de navegación <nav> y, dentro de ella, escribimos nuestro menú:

<header>
    <nav>
        <ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Tutoriales</a></li>
		<li><a href="#">Cursos</a></l>
		<li><a href="#">Bootcamps</a></li>
		<li><a href="#">Contacto</a></li>
	 </ul>
    </nav>
</header>

De esta forma obtenemos nuestro menú básico. Como ves, este menú no tiene ningún formato y es vertical. Para hacer un menú más atractivo, debemos trabajar en el estilo en CSS.

Aplicar estilo al menú de navegación con CSS

Primero, cambiaremos el color de fondo del menú, su ancho y la forma en la que se organiza respecto a los demás elementos de la web con el siguiente código:

header {
  background: rgba(0,0,0,0.7);
  width: 100%;
  position: fixed;
  z-index: 100;
}

La primera línea después del header es background. Con este atributo definimos el color RGBA del fondo de la barra de menú. En este caso, hemos seleccionado negro con una opacidad del 70%.

La siguiente línea es el ancho del menú y lo hemos puesto para que se vea en toda la pantalla, de lado a lado.

El atributo position: fixed indica que el menú debe quedarse quieto; es decir, si bajamos en la web, el menú nos acompañará en todo momento.

Finalmente, z-index sirve para especificar el orden en el que se amontonan los elementos. En este caso, ubica el menú sobre todos los demás elementos.

A continuación, te explicamos cada uno de los bloques de código dentro de la etiqueta <nav>:

nav {
  float: left;
}

Con este código CSS especificamos que el menú esté alineado a la izquierda de la página.

nav ul {
  list-style: none;
  overflow: hidden; 
}

Ahora modificamos el estilo de la lista. Con list-style especificamos la forma de la viñeta de cada elemento de la lista. Para nuestro caso, no vamos a usar ninguna forma por la que definimos esta propiedad con none.

Con la propiedad overflow eliminamos los errores que se puedan dar por contenido fuera de nuestro bloque de menú.

Con overflow: hidden hacemos que todo contenido fuera del bloque del menú se corte y se invisibilice.

nav ul li {
  float: left;
  font-family: Arial, Helvetica, sans-serif;;
  font-size: 20px;

Este fragmento de código es muy importante al hacer un menú de navegación en HTML. En el, establecemos que los submenús o páginas se muestren horizontalmente y no uno debajo del otro. Esto se consigue con la línea float: left.

La propiedad font-family indica qué tipo de fuente tendrán los menús. En este caso, existen 3 tipografías por si surge algún problema de incompatibilidad.

La última línea define el tamaño de letra de cada elemento del menú.

nav ul li a {
  display: block; 
  padding: 20px;
  color: #fff;
  text-decoration: none;
}

Es momento de trabajar los elementos Anchor (a) o los enlaces. Primero lo convertiremos en un bloque con display: block. De esta forma, ya podemos agregarle un padding, lo que mejorará visualmente nuestro menú y reduciremos errores de dimensión.

Con la propiedad color especificamos el color de los enlaces, y con la línea text-decoration decidimos si queremos algún tipo de decoración, como el subrayado. Para este caso no vamos a usar ninguna.

nav ul li:hover {
  background: #eca023;

Finalmente, seleccionamos qué color queremos ver al posarnos sobre un elemento del menú. Con la propiedad background le especificamos el color por medio del sistema HEX de colores.

Resultado del menú de navegación

Ahora ya tenemos un menú decente para nuestra página web. El resultado se ve así:

Cómo hacer un menú de navegación en HTML 1

Evidentemente, podemos configurar muchas más opciones para que sea más profesional y sin errores. Sin embargo, estas son las nociones básicas para hacer un menú de navegación en HTML totalmente funcional y amigable con el usuario.

Por último te dejamos el código completo del menú que acabamos de crear:

header {
  background: rgba(0,0,0,0.7);
  width: 100%;
  position: fixed;
  z-index: 100;
}

nav {
  float: left;
}

nav ul {
  list-style: none;
  overflow: hidden; 
}

nav ul li {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
nav ul li a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}
nav ul li:hover {
  background: #eca023;
}

Cómo continuar aprendiendo sobre HTML

En este post has aprendido a hacer un menú de navegación en HTML de forma básica y sencilla, pero aún queda mucho más por aprender para sofisticar tu código y hacerlo aún más bonito y funcional. Para ello, puedes aprender a dar estilo mediante CSS, lo que mejorará visiblemente los elementos de tu web. Para continuar formándote en este ámbito, te recomendamos echarle un vistazo a nuestro Desarrollo Web Full Stack Bootcamp, donde te convertiremos en un desarrollador experto en poco tiempo. ¡Apúntate!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]