12 trucos de CSS avanzado

Navegación con botonera con desplegables en responsive

¡Prueba gratis durante 10 días

nuestros 1149 cursos !

Prueba gratis Mostrar modalidades de suscripción
Vamos a convertir nuestro menú de navegación de dos niveles en un menú responsive con tan solo unas líneas de CSS y HTML. Descubriremos lo fácil y sencillo que puede llegar a ser conseguir nuestro menú responsive.

Transcripción

Vamos a convertir nuestro menú de navegación de dos niveles en un menú "responsive" con tan solo unas líneas de CSS y HTML. Vamos a ver lo fácil y sencillo que puede llegar a ser conseguir nuestro menú "responsive". Lo primero, vamos a abrir nuestro HTML en el Chrome. Vamos a dar a Inspeccionar, para que nos salga la barrita con el inspector de código, para poder utilizar el modo "responsive". Como veis, cuando yo activo la vista para dispositivo móvil –vamos a elegir una que me entre en pantalla, ahí está, y el 100 %–. Acordaron siempre que esto esté al 100 %. Como veis, mi menú se adapta al tamaño, pero no se está adaptando correctamente, por lo que vamos a ir paso a paso. Nos vamos a nuestro editor de código. Lo primero que tenemos que hacer es añadir nuestra 'meta viewport'. Con ella conseguiremos que nuestra página se renderice correctamente para dispositivos multipantalla. Aquí la tenemos: 'meta viewport'. Si salvamos y nos vamos a nuestro documento, como veis ahora está adaptándose correctamente al tamaño de pantalla que tenemos. Lo que vamos a hacer es intentar adaptar este menú para que se vea perfectamente. Una de las cosas que tenemos que tener en cuenta a la hora de renderizar menús para dispositivo móvil es que el 'hover' deja de existir. El 'hover', al fin y al cabo, es un evento de ratón que en dispositivos móviles no tenemos. Entonces, lo primero que vamos a hacer es quitar los efectos de 'hover' que tengamos en nuestro CSS, para poder utilizar correctamente las opciones. Nos vamos a nuestro CSS. Como podemos ver, aquí tenemos un 'hover' que lo que está haciendo es mostrar ese menú cuando se hace 'hover' sobre el 'li', y aquí la propiedad que hace que no se vea. Entonces, lo que vamos a hacer es comentar esta propiedad y comentar esta línea. Salvamos, nos vamos a nuestro navegador y ahí podemos ver que tenemos nuestra opción de menú. Pero claro, quitar estas propiedades, las queremos única y exclusivamente quitar cuando sea dispositivo móvil, por lo que vamos a escribir nuestra 'media query', añadimos nuestros "breaking points" –aquí tenemos los cuatro cortes que normalmente suelo hacer– y añadimos aquí el comentario, para saber qué tenemos en cada trozo de nuestro CSS. Recordaros que es superimportante comentar las CSS. Así que lo primero que vamos a hacer es trabajar, por ejemplo, para iPad. Ponemos al 100 %, ahí está. Nos vamos aquí, esto lo queremos para "desktop", vale, pero lo que queremos es que en iPad sí que se vea. Es decir, que lo que queremos es que nuestro 'subnavbar' esté a 'block' cuando estamos en iPad. Ahí está. De esta manera, si desactivamos esto, desaparece y funciona nuestro 'hover'. Sin embargo, si estamos en iPad, se vería perfectamente. El siguiente tamaño con el que nos vamos a meter es con un iPhone 6 Plus, por ejemplo. Acordaros siempre de que esto esté al 100 %. Como veis, en un iPhone 6, el menú queda muy apretado. Tenemos distintas opciones, una de ellas puede ser, por ejemplo, disminuir el tamaño del texto. Entonces, nos vamos a ir aquí y le vamos a decir que los enlaces de mi menú tienen un tamaño de fuente mucho más pequeño, por ejemplo, 15. Queda mucho mejor y no tan apretado. Lo otro que nos queda es adaptar el submenú. En este caso, dependerá de lo que el diseñador nos diga. Pero a bote pronto lo que podemos hacer es decirle que queremos que nuestras opciones de submenú ocupen todo. Para ello, como las tenemos posicionadas de forma absoluta, lo que haremos será determinar nuestra 'position relative' en otro lado. En este caso, en vez del 'li', que sea del 'ul'. Para ello, reseteamos la propiedad y así podemos ver nuestras opciones de menú con el submenú. Si ya lo que queremos hacer es que este menú aparezca o desaparezca, en el caso de dispositivos móviles no nos quedará otra que insertar JavaScript, de cara a utilizar el evento de clic o "tap". Si nos vamos al iPhone 6, como veis, nuestra pantalla... ahí está, está adaptado para que se vea correctamente. Así hemos conseguido hacer un menú desplegable para dispositivos multipantalla.

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.