Crear una barra de navegación estilo Google+ con CSS3 y jQuery

lunes, julio 02, 2012
COMPARTE EL POST

image

Hace poco que Google actualizó su interfaz para ya no parecerse a la interfaz vieja de Facebook, pasando un poco a parecerse un poco a la nueva interfaz. Lo que caracterizó este cambio fue la nueva barra de navegación, la cuál se ubicó a un costado con unos íconos muy pispiretos.

En este tutorial vamos a ver cómo crear una barra de navegación estilo Google+ con CSS3 y jQuery, una barra que la trataremos de estandarizar para aplicarla a nuestro contenido, y verán que la elaboración es muy fácil, pudiendo añadir sus propios íconos si ustedes quieren. Así que no se pierdan el tutorial.

Crear una barra de navegación estilo Google+ con CSS3 y jQuery

Demo del tutorial | Archivos del tutorial

HTML5

Este tutorial tiene HTML5 pero de una forma muy sencilla. Lo que tenemos para nuestra estructura son tres partes principales. La primera parte es la barra de navegación, los botones laterales, los cuales tienen como todo englobado un link, y dentro una capa con un id respectivamente. La segunda parte consta de la flecha que vamos a usar para apuntar a la sección que estamos actualmente viendo. Y por último está la parte de contenido, hay un section que actúa como contenedor y dentro tenemos en este caso tres capas con su respectivo id. Noten que tiene un id parecido al texto del menú, porque esto nos va a servir para poder mostrar el contenido correcto cuando usemos jQuery.

CSS3

Si nos damos cuenta la estructura no es muy diferente a cualquier menú de navegación o de tabs. Lo más importante es la configuración de las hojas de estilo para darle el aspecto e imagen que queremos.

Lo primero es configurar el menú y el contenido para ubicar todo antes que nada. En realidad esta es la parte que pueden configurar a su gusto, yo la use para adecuarla a lo que yo quería, pero pueden jugar con esta parte un poco.

Lo siguiente es configurar la flecha para indicar en qué sección estamos actualmente. Esto si tiene que involucrar CSS3 y un poco de magia para hacer con puro CSS un triángulo. Recuerden que todo está en position: fixed, por lo que no van a poder mover nada, o en otras cosas, no es muy responsive design, pero pues la interfaz de Google+ también es así, así que de alguna forma sigo el funcionamiento. Nótese la importancia de usar :after y :before para poder hacer el recorte del rectángulo.

Sin embargo ahora si llega lo más importante de todo. Nuestras opciones de menú constan de cuatro estados: cuando están normal (color gris), cuando el mouse está sobre la opción (:hover), cuando se presiona la opción (:active), y cuando es el que se está usando (:target). El :target es un nuevo estado que se activa cuando un objeto tiene su id en la barra de direcciones, como por ejemplo ..com/#nHome, en estos casos el estilo se activa para ese id y por eso usamos eso, para saber cuál es la opción que está actualmente en uso y así poder mostrar en cierta forma un ícono específico.

También como podemos ver necesitamos un estilo .actual que nos va a servir para indicar desde un principio cuál opción es la que se va a mostrar al cargar el sitio; ya veremos que con jQuery lo podemos quitar para que no quede seleccionado siempre el Home.

home

Después tenemos que nuestros íconos son un sprite, por lo que para el tutorial tenemos solo 3 imágenes que tienen 3 estados cada uno. El estado de :hover y :target son el mismo, así que no necesitamos otra imagen más. La tercer imagen es cuando se presiona el botón (:active). Por tal motivo usamos tres estilos para cuatro estados realmente, así repetimos con nuestras tres opciones, las que queramos.

jQuery

Comenzamos como cualquier inicio de jQuery, definiendo nuestra función de inicio(), pero noten que declaramos un evento para todas las opciones para mostrar y acomodamos la flecha para que apunte a la primera opción, la de Home. Usamos para esto un offset() para que se ubique y le quitamos 20 pixeles para que quede al centro de la opción.

Ahora tenemos que configurar nuestra función. La trampa para hacer funcionar nuestro menú de una forma muy fácil es el texto que le ponemos a nuestras opciones, y el nombre del id que le pusimos a nuestros article. El article tiene un “a” seguido del texto de las opciones, entonces tenemos que formar el nombre de la capa que queremos mostrar de acuerdo a la opción que el usuario escogió. Después de que juntamos el nombre ocultamos todas las capas de contenidos y a continuación con un fadeIn() mostramos la adecuada. Lo que sigue es quitarle la clase al Home para que no se quede prendido siempre. Y por último usamos un animate() para mover nuestra flecha al offset() de la opción que se ha elegido, le quitamos 20 pixeles y con eso aseguramos que esté más o menos en el centro de la opción.

Y con esto ya debemos tener bien configurado nuestro menú y contenedores listo para imitar el estilo de Google+, muy fácil porque es estático todo, pero quizá si añadiéramos un poco de Ajax con base de datos estaría más completito, pero quizá eso lo veamos en otro tutorial.

¡Síguenos en Twitter!


Deja tu comentario