12 trucos de CSS avanzado

Navegación con desplegables y tercer nivel en responsive

¡Prueba gratis durante 10 días

nuestros 1145 cursos !

Prueba gratis Mostrar modalidades de suscripción
Un menú de tres niveles y además responsive no es tan complicado como parece, lo importante es ser conscientes de las opciones más importantes y el resto trabajarlo mediante CSS y HTML. Aprenderemos cómo gestionar estos menús para que no nos den dolor de cabeza.

Transcripción

En este vídeo vamos a aprender cómo generar este menú "multilevel", para que sea adaptable a distintos tipos de pantalla, haciéndolo así "responsive". Aquí tenemos nuestro HTML con el que vamos a trabajar y nuestra CSS. Lo primero que tenemos que hacer es añadir nuestra 'meta', para hacer que se visualice correctamente en dispositivos multipantalla. Nos vamos al Chrome, Inspeccionar y activamos nuestro dispositivo multipantalla. Vamos a elegir el iPad. Como veis, esto siempre al 100 %. Tenemos un menú que se adapta, pero claro, en dispositivo móvil no existe el 'hover'. Entonces, lo primero que vamos a hacer es eliminar nuestro 'hover'. Nos vamos a nuestra CSS y lo primero que haremos será eliminar nuestro 'hover'. También tenemos unas pocas líneas de JavaScript, ya que un menú multinivel en dispositivos móviles, si queremos darle una salida que sea realmente decente, vamos a tener que añadir algo de JavaScript. En este caso estoy añadiendo jQuery. He añadido ahora CDN de jQuery, que es el acceso remoto a su archivo jQuery, y he añadido un par de líneas. Los que utilicéis jQuery, ya sabréis que lo que estoy haciendo aquí es generar un 'span' mediante JavaScript, para crear el conocido icono de hamburguesa, que es el de Menú, añado la clase 'sel' en el elemento 'down' de mi menú, para poder gestionar el 'ul' de mi menú. Entonces, ahora nos vamos a la CSS y lo que vamos hacer es... Como veis, aquí se ve mi icono de hamburguesa. Aquí no se vería. Esto al 100 %, porque lo que estoy haciendo en mi 'media query' es decirle que el botón Menú sí que se vea y en desktop que no se vea. Vamos a tunear nuestro menú, para que se vea. Una vez hacemos clic en ese menú, si nos vamos aquí, la clase 'down' está a 'none', si no se vería nuestro menú. He reseteado los valores necesarios, para que al hacer clic, mi menú se vea todo hacia abajo. He quitado los 'hover'; he reseteado las alturas y los colores; he hecho que los menús desplegables también se vean; he resetado los valores que tenían puestos por defecto, para que se muestren directamente. Entonces, ahora lo que he conseguido ha sido que al hacer clic en mi icono de Menú, se aplique la clase 'sel'. ¿Habéis visto que aquí se ha activado? Y entonces lo que estoy haciendo es que mediante mi clase 'sel', estoy teniendo potestad sobre mi 'ul' y lo que estoy haciendo es que se visualice todo hacia abajo. Si nos vamos a un dispositivo más pequeño, para que veáis cómo quedaría... aquí... vamos a actualizar, para que lo veáis desde 0, tendríamos mi icono Menú y al hacer clic, se vería nuestro menú. De esta forma –esto siempre al 100 %– tenemos un menú que aparece cuando hacemos clic en nuestro icono Menú.

12 trucos de CSS avanzado

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.