CSS avanzado: 12 trucos

Navegación con botonera en línea en responsive

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este vídeo vamos a ver cómo convertir nuestros menús de navegación simple en menús responsive multipantalla de una manera sencilla. Todo ello mediante CSS y HTML sin necesidad de utilizar JavaScript.

Transcripción

Vamos a ver cómo convertir estos menús simples para que sean "responsive". Para ello, nos vamos a nuestro código. Aquí tenemos el código de nuestros menús, el CSS de nuestros menús y las 'media queries' que vamos a utilizar. En este caso, yo voy a utilizar tres: 768, 600 y por último 360. Podemos utilizar más medidas, siempre y cuando seamos conscientes de a qué tamaños de pantalla hacen referencia. Podríamos añadir, por ejemplo, 540, que sería el tamaño de un iPhone 6. 360 ya sería el tamaño de un iPhone 5 o un iPhone 4. Y entonces, teniendo en cuenta estas 'media queries', nos vamos a nuestro navegador. Aquí tenemos el HTML. Para este ejercicio, vamos utilizar el Chrome, puesto que tiene una extensión y me parece tremendamente útil, es de las que más utilidad he encontrado. Si nos vamos aquí, le damos a Inspeccionar, tenemos una que es para elegir elementos y otra que es para activar o desactivar nuestro dispositivo. Como hemos comenzado con el "breaking point" de 768... vamos a activar esto. El 768 sería el iPad, como podéis ver aquí. El único detalle es que, en este caso, a mí no me entra la pantalla y por eso me lo reduce hasta el tamaño de pantalla. Lo importante es darnos cuenta y siempre poner que sea el 100 %. El siguiente elemento que tenemos que tener en cuenta a la hora de hacer un "site responsive" es que tenga esta meta: 'meta viewport', así conseguiremos que se renderice correctamente para cada uno de los dispositivos. Como veis, mi menú ya se está adaptando al tamaño de nuestra pantalla. Si cambiamos entre Firefox y Chrome –Firefox porque lo tengo en pantalla completa para que veáis cómo cambia–, él automáticamente está gestionando los espaciados, está utilizando las propiedades del 'flex' para colocar correctamente cada uno de los espaciados. Vamos a dar un par de toques, para terminar de colocarlo. Por un lado, por ejemplo, esta barrita aquí actualmente mide 80, quizás nos interesa que sea un poco más anchita. Entonces nos vamos a nuestra CSS y le decimos que el 'after', en vez de medir 80 % mide 90 %. Lo importante cuando hacemos "responsive" es sobrescribir única y exclusivamente las propiedades que necesitamos. Hemos cambiado el tamaño. También tenemos que mover el de izquierda. Puesto que aquí se lo estamos destinando, si nos vamos a la opción para que veáis un poquito, tenemos nuestra primera opción. Si nos vamos al 'after', en un primer momento el 'width' medía 80, yo lo he cambiado a 90 . Y el 'left' medía 10 y lo he cambiado a 5. Aquí ya queda a vuestro gusto. Si queréis que mida el 100 % y que esté directamente a la izquierda, podemos modificarlo de la misma manera. También dependerá de lo que nos diga el diseñador sobre su diseño. Ahí tenemos: 0 y del 100 %. Si nos fijamos, aquí nuestro 'after' se ha movido, hay que colocarlo. En este caso, tendremos que sobrescribir la opción del 4. Nos vamos aquí, le decimos que el 'width' sigue siendo de 30 píxeles. Vamos a ver cómo queda en el navegador. Ahí la tenemos. Y lo otro importante sería decirle que el 'lef't es auto. Ahí está. Así tendríamos este menú de navegación orientado a "responsive" para iPad. El siguiente paso sería hacer que fuera "responsive" para el iPhone 5. Le ponemos al 100 %, que no se nos olvide. Como veis, automáticamente ya se están recolocando. Lo que vamos a hacer en este caso es que una opción esté debajo de otra. Vamos a irnos al tamaño del iPhone 5, que serían 320. Es decir, nos va a afectar esta 'media query'. Le vamos a decir que el 'a' es de tipo bloque, para que nos ocupe todo, y también que el 'navbar' no sea de tipo 'flexive'. Así tenemos nuestras opciones una debajo de otra. Lo siguiente que haremos será decirle cuánto mide de alto cada una de nuestras opciones, para que genere el hueco necesario, y especificar que el 'navbar' ya no tiene altura. Ahí tenemos cada una de nuestras opciones. Para que quede mejor, vamos a añadir un 'border-bottom' a los enlaces, de color blanco. Ahí está. Incluso, yo creo que podemos utilizar hasta dos. Si lo que nos interesa es que queden alineados verticalmente, respetaremos su propiedad de 'flex'. Ahí está. Y como podemos ver, aquí tenemos las opciones de menú uno debajo de otro. Así es como podremos ir trabajando con el menú para poder hacerlo "responsive".

CSS avanzado: 12 trucos

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.