Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=539fc971-b023-4d5d-8b0c-5a08f9cdade3

Cómo hacer un menú desplegable para móviles con HTML5 y CSS3 (Sin JavaScript)

Si no quieres utilizar jQuery o JavaScript en tu proyecto pero necesitas que tu web funcione en móviles y tablets, esta puede ser tu solución. Y es que es posible construir un menú desplegable con efectos utilizando solamente HTML5 y CSS3.

La idea principal es que los elementos del menú permanezcan ocultos hasta que el usuario necesite interactuar con él, teniendo además un “botón” que permita desplegarlo y ocultarlo. Para webs de escritorio, esto se soluciona fácilmente utilizando la pseudo-clase :hover.

Algunas pseudo-clases de CSS permiten identificar en qué estado se encuentra un elemento de HTML. Por ejemplo: la siguiente regla especifica que todos aquellos enlaces que estén dentro de una lista se subrayen cuando pasemos el ratón por encima.

Ul li a:hover{
    text-decoration:underline;
}

Sin embargo, dado que la gran mayoría de dispositivos táctiles no reconocen el estado :hover necesitarás utilizar otras técnicas de CSS para poder mostrar y ocultar el menú. La clave es saber utilizar la pseudo-clase :target.

Por otro lado, el sistema de navegación con anclas de HTML permite asociar un enlace a cualquier elemento que haya dentro de la página mediante el uso de un id. Al hacer clic en el enlace, éste navegará hasta el elemento asociado.

         < a href="#galeria" > ver a galería de imágenes < /a>
 

Pues bien, gracias a la pseudo – clase :target, también podrás manipular el CSS igual que si dieses la orden de añadir una clase por jQuery. Partiendo del ejemplo anterior podemos determinar que si la #galeria está oculta, al pulsar el enlace asociado a la sección, ésta se muestre:

#galería {
  display: none;
}
#galería:target {
  display: block;
}

Como ves, basta con que el href del enlace tenga el mismo identificador que la galería. Cuando el enlace se active :target se encargará de activar los estilos que hayas indicado. ¿Fácil no? Si has entendido estos conceptos ya puedes ponerte manos a la obra con el menú:

Cómo crear un menú desplegable con CSS3

Paso 1: construir la navegación

Primero crea una navegación y dale un identificador. Esta etiqueta debe contener el listado de elementos que conforman el menú.

Paso 2: botones que controlan el menú

Cuando hayas creado el listado, añade otro divisor que contenga dos enlaces que servirán como botones para abrir y cerrar el menú.

Es clave que en el href del enlace .open incluyas el identificador que le has dado a la etiqueta <nav></nav> para que, como has visto antes, todo lo que manipules utilizando la llamada adecuada en CSS ocurra cuando el enlace sea activado.

Después añade una clase a la lista con los elementos del menú y asígnale un height de 0 para que para que permanezca oculta en el estado inicial.

Paso 3: hacer que los controles desplieguen él menú

A continuación, debes indicar por CSS que esa lista pasará a tener un height de 15.8 em (o lo suficientemente alto como para que deje ver los elementos del menú). Como el enlace .open tiene un ancla con el mismo id, al hacer clic en él su altura cambiará de height=0 a height=15.8em . ¡Ahora tu menú ya se abre!.

Paso 4: hacer que los controles contraigan el menú

Por último, tendrás que conseguir que el menú no sólo se despliegue sino que también se vuelva a cerrar. Para esto es importante saber que cuando activas un ancla, esta sólo se desactivará haciendo clic en otro enlace. Por lo tanto el href del botón de cerrar debe ser otra ancla que nos permita anular la anterior. Esta no debe tener asociado ningún otro elemento sólo debe anular el enlace.

Añade dos reglas más para conseguir que los dos enlaces se desactiven recíprocamente:

De esta forma, al pulsar en el enlace "cerrar" las anclas se desactivarán y volverá todo al estado inicial.

¡Es todo! Ahora que tu menú ya funciona, añade estilos CSS para darle el diseño que necesites.

Añadir efectos:

Para terminar, podemos añadir efectos de animación para suavizar el comportamiento de las anclas a las reglas que ya habías creado:

Y también a la inversa:

Como ves, el resultado es muy limpio y efectivo, ¡y sus efectos poco tienen que envidiar a los de jQuery!. Espero que te sirva para futuros proyectos.

Puedes descargarte el ejemplo completo de este artículo aquí (ZIP, 8KB).

Fecha de publicación:
Natalia Matesanz Diseñadora Web y UX. Licenciada en Publicidad y Marketing, es especialista en creación de interfaces de usuario y diseño de interacción. Entusiasta con su trabajo, viajera empedernida y cocinera de ideas que trata de aportar valor a todo lo que hace. Madrileña que después de trotar por el mundo se dejó encandilar por el Norte. Ver todos los posts de Natalia Matesanz
Archivado en: Desarrollo Web

¿Te vas a perder los mejores trucos de programación?

Únete a miles de desarrolladores que ya reciben cada mes nuestro boletí­n por email. No te pierdas los mejores trucos, noticias y frikadas.

Enviamos poco, pero bueno. Palabra de desarrollador.

Suscríbete aquí­

Sí­guenos también en:

Telegram LinkedIn YouTube
La mejor formación online para desarrolladores como tú

Comentarios (7) -

Buenos días,

Como puedo hacer para que en vez de que el menú se abra debajo se abra a la derecha de botón menú de tal manera que en vez desplegarse hacia abajo se despliegue hacia la derecha?

Un saludo

Gracias de antemano

Gorka Queija

Responder

Hola Gorka:

Sería igual que se muestra en el post pero en lugar de variar la altura en la transición variarías el ancho. Es decir, todo lo que se refiere a la altura en el ejemplo se referiría al ancho en lo que tú quieres hacer, pero es lo mismo.

Responder

Hola, queria saber si es posible poner un enlace externo en el menu desplegable, es decir, en vez de poner <a href="#galeria"> se ponga algo asi <a href="http://www.paginaweb.com";> porque necesito que el menu me mande a otra pagina y no a un lugar de la misma pagina. Espero se haya entendido, saludos.

Responder

Hola Marjorie:

Sí, claro, puedes usar enlaces externos exactamente igual que los que se han puesto en el ejemplo.

Pruébalo y verás que no hay problema.

Saludos.

Responder

Hola, estoy intentando utilizar tu código. Si lo uso tal cual funciona, pero al agregarle un javascript que hace que el scroll sea animado, deja de funcionar. Sabes qué puede ser? Este es el códico js:
$(function(){
     $('a[href*=#]').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
         && location.hostname == this.hostname) {
             var $target = $(this.hash);
             $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
             if ($target.length) {
                 var targetOffset = $target.offset().top;
                 $('html,body').animate({scrollTop: targetOffset}, 1000);
                 return false;
            }
       }
   });
});
Gracias

Responder

Hola, resulta que si por ejemplo cambio href="#galeria" a un enlace a otra página href="galería.html"( en mi caso otra página de mi web) no hace el efecto de recogida del menú, si no que se va a la página de enlace directamente. Se puede enlazar a otra página sin perder el efecto?
Gracias.

Responder

Hola Pepe:

En cuanto haces clic a una página externa el navegador la carga inmediatamente, y, a través de CSS, no hay forma de capturar este evento para que se haga después de la transición. Tendrías que capturar el evento, aplicar algún tipo de retardo y después redirigir a la página en cuestión través de JavaScript o jQuery, y claro, el propósito del post es evitar usarlos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.