Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Cómo Crear Una Navegación Franjeada con Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Gracias a flexbox, hoy en día podemos crear algunos maquetados realmente atractivos y modernos con relativa facilidad. En éste tutorial vamos a ver una interfaz utilizada recientemente para Google National Parks, y ver cómo flexbox puede ayudarnos a mejorarla.

Como siempre, antes de continuar, veamos lo que crearemos (puedes verificar la versión más grande pues el efecto completo inicia en ventanas gráficas que tienen más de 800px de ancho):

Asegúrate de colocarte sobre los enlaces para desencadenar los efectos corrrespondientes.

El Marcado

Primero, examinemos el marcado que usaremos para crear éste maquetado o diseño. Definimos un elemento div con cinco enlaces dentro de él (puedes usar cualesquiera elementos que te parezcan adecuados). Cada uno de nuestros enlaces contiene un div con la clase de overlay. Abajo puedes ver el esqueleto de nuestro código:

Estilos CSS iniciales

Con el marcado listo, comenzamos a definir algunos estilos CSS iniciales, específicamente:

  • Especificar el div más exterior como un contenedor flex y establecer su altura igual a la altura de la ventana gráfica con height: 100 vh.
  • Establecer una anchura igual para todos los enlaces (elementos flex). Para lograr eso, les damos a cada uno flex: 1. Adicionalmente, todos nuestros enlaces tendrán una imagen de fondo (obtenida de unsplash.com) que cubre la altura de la ventana gráfica. Como una solución alternativa (en caso de que una imagen no esté disponible), también especificamos un único color de fondo para cada uno.
  • Cuando nos colocamos sobre un enlalce, su tamaño se hace tres veces más grande con respecto al tamaño de los otros enlaces. Hacemos ésto al cambiar el valor de la propiedad flex del enlace objetivo. Afortunadamente ésta propiedad pertenece a las propiedades CSS animadas, asi que podemos generar un suave efecto de transición (al menos en navegadores más recientes).

Aquí está parte del código CSS que demuestra lo que hemos descrito arriba:

Hasta ahora, si previsualizamos el demo en un navegador que soporta flexbox, veremos éste resultado:

Aplicando Estilo a la clase Overlay

Nuestro próximo paso es asignar estilos a los elementos con clase overlay (superponer). Lo haremos así:

  • Dar a los elementos con clase overlay las mismas dimensiones del enlace padre. Podemos lograr éste comportamiento al posicionarlo absolutamente (relativo al padre inmediato) y luego especificar valores cero para todos las propiedades de desplazamiento.
  • Definir el overlay como un contenedor flex. De ésta forma, podemos centrar su hijo directo (es decir elemento .overly-inner ) verticalmente y horizontalmente.
  • Agregar un fondo gris semitransparente al overlay cuando nos colocamos sobre el enlace padre.

Aquí están los estilos CSS asociados:

Overlay Interior

Ahora, es momento de aplicar estilo a las partes interiores de nuestros overlay. Por defecto éstos están ocultos y deben aparecer sólo cuando nos colocamos sobre el correspondiente enlace padre. Pero no inmediatamente, los revelaremos después de un pequeño retraso. Éste retraso es importante, si no lo definimos específicamente, el efecto de transición se verá un poco feo. Remúevelo y prueba el demo para entender lo que quiero decir.

Solo para recapitular, primero el enlace se hace más grande, luego los elementos overlay se hacen visibles. También, usamos translate3d() para crear algún deslizamiento en los efectos. Al último pero no menos importante, usamos transform-style:preserve-3d (o una propiedad similar) para evitar posibles efectos no deseados en diferentes navegadores.

Y aquí están los estilos CSS relacionados:

Veamos lo que nos resulta.


Haciéndolo Responsivo

La página se ve magnífica en pantallas grandes, pero quizá en pequeñas, o incluso en pantallas medianas tendremos que hacer algunos ajustes. Por ejemplo, aquí algunas cosas que podemos hacer:

  • Voltear el eje principal del contenedor flex al agregarle flex-direction: column. Al  hacerlo así los elementos flex fluirán de arriba a abajo.
  • Cancelar todos los efectos de transición y mostrar los elementos overlay por defecto.

Nuestra media query primero-escritorio se ve como sigue (he usado 800px sólo porque se ajusta a los demos incluídos en éste post- tu puedes elegir la que mejor te parezca):

Aquí está la apariencia final de nuestra navegación:

Soporte de Navegador

El demo funciona en todos los navegadores recientes que soportan flexbox.

En algunos navegadores puedes notar que la animación de la propiedad flex no es tan sutil como debería, o quizá no funciona en absoluto. Por ejemplo, IE11 no anima ésta propiedad, mientras que Edge si lo hace. Ésto es suficientemente razonable, considerando el hecho que flexbox es un nuevo modo de maquetación o diseño que está ganando adeptos.

Conclusión

En éste tutorial, mejoramos nuestro conocimiento de flexbox al aprender cómo crear un diseño de navegación estilizado. ¡Espero que hayas disfrutado lo que elaboramos aquí y haber tomado inspiración para tus proyectos futuros!

Si creas un maquetado similar, no olvides mostrarnos el enfoque que usaste (solución basada en JavaScript o en puro CSS).

En la Red

Antes de concluir, me gusaría compartirte algunos sitios que usan un diseño similar al que acabamos de crear:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.