Crear un menú de navegación responsive

Tiempo estimado de lectura: 4 minutos

 

Menú de navegación responsive con código

Hoy vamos a ver cómo podemos crear un menú de navegación responsive, es decir, que se adapte al tamaño de ventana del dispositivo que lo muestra. Este artículo complementa, en cierto sentido el artículo de la semana pasada, donde hemos visto cómo hacer una galería de imágenes responsive.

Lo cierto es que no es demasiado complicado hacerlo, pero el código que vamos a utilizar es un poquito extenso,. Pero como siempre, lo explicaremos para que sepas cómo funciona y qué cosas puedes cambiar para adaptarlo a tus necesidades.

Código que vamos a utilizar para hacer el menú de navegación responsive

En primer lugar, tenemos que saber un par de cosas antes de comenzar:

  • El menú se mostrará mediante la etiqueta <ul> (una lista no ordenada).
  • Cada ítem del menú se mostrará como un elemento de lista <li> de ese <ul>
  • Utilizaremos una etiqueta viewport, que establecerá la escala inicial para visionar el menú,  a 1.0.

El código que utilizaremos puede ser algo parecido a este:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #3f51b5;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>

Como siempre, la explicación del código

En primer lugar, creamos una clase llamada topnav que nos servirá para crear el menú superior. Esa barra no mostrará desbordamiento y su color de fondo será gris oscuro (#333).

A continuación, estableceremos que todos los elementos de lista (<li>), se situarán a la izquierda, actuarán como bloques independientes. Cuando el cursor del ratón se sitúe sobre alguno de estos bloques, cambiará su color de fondo por un color casi negro (#111). Además, cuando el ítem del menú esté activo, es decir, cuando se haga clic en él, su color de fondo cambiará a un color azul (#3f51b5).

Por otro lado, establecemos el salto en los 600 píxeles o menos, con lo que, la llegar a esa longitud, los bloques pasarán a situarse uno debajo del otro.

Código HTML para crear el menú de navegación responsive

Lo último que nos falta ahora es crear el menú de navegación en sí. Para ello podemos utilizar un código similar a este:

<ul class="topnav">
<li><a class="active" href="#inicio">Inicio</a></li>
<li><a href="#acerca">Quienes Somos</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>

Aquí lo que hacemos es crear una lista desordenada (como hemos dicho antes), que contenga los ítems de navegación del menú y los vínculos hacia donde apunta cada uno.

El resultado será este:

Ejemplo de menú de navegación responsive
Ejemplo de menú de navegación responsive


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *