Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Crear una Estupenda Navegación Animada con CSS y jQuery

by
Difficulty:IntermediateLength:LongLanguages:

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

La animación y las respuestas visuales son magníficas formas de asistir a un usuario en la navegación e interacción con un sitio web. Si bien, tradicionalmente Adobe Flash fue la función 'goto' para cualquier animación, estos días con la magia de javascript podemos librarnos de Flash. Hoy vamos a construir una animación de un menú de navegación, verdaderamente, estupenda; usando sólo CSS y jQuery.

Demo y Recursos de Códigos


Resumen

El menú que vamos a construir puede verse en la siguiente captura de pantalla. Además, usted puede ver el trabajo final haciendo clic aquí.

Voy a dividir este curso en cinco secciones que son las siguientes:

  • Borrador de boceto
  • Creando los Recursos
  • Escribiendo el HTML
  • Escribiendo el CSS
  • Creando la animación usando jQuery

Paso 1: Borrador de Boceto

En primer lugar, veamos que es lo que necesitamos hacer aquí.

Así que acá está una idea aproximada de lo que debería hacer:

  • Dividiremos la página en 4 partes; encabezado, navegación y encabezado del contenido y el resto del contenido.
  • El área del encabezado será una sencilla etiqueta contenedor <div>.
  • La navegación será dividida en varias <div> contenedores complementando los ítem del menú.
  • Ahora, la mayor parte del tiempo usaremos las etiquetas html; <ul> y <li> como contenedores, pero ya que cada ítem del menú es único,
    no veo las ventajas de usar las etiquetas <ul> y <li>, así que voy a usar un <div> contenedor en lugar de ellas.

  • El contenido será un simple <div> contenedor.

Así que para resumirlo.

Podría ayudar el mostrar la estructura del directorio.  La estructura del directorio es la siguiente:

Paso 2: Recursos

Supongo que usted tiene un conocimiento básico usando Photoshop, por lo tanto, no voy a dar demasiadas instrucciones detalladas en crear los recursos.
Hay varias cosas que necesitamos crear.

  • Fondo del Encabezado
  • Título del Contenido
  • Navegación
  • Franja del fondo

Note que si usted desea omitir este paso, entonces usted puede descargar los archivos zip que están al final de éste curso y ¡extraer mis copias!

De acuerdo, vamos a crear el fondo para el encabezado. Abra Photoshop y cree un lienzo de 1 x 181 px o usted puede crear uno más largo y luego recortar la imagen.
Cree una capa y aplique un degradado linea con un color preestablecido Frontal a Fondo para 171px, éste será el degradado principal.
Cree otra capa y aplique un degradado linea con un color preestablecido Frontal a Fondo para 10px al fondo de la primer capa para algunos efectos de sombras.

Aquí esta como es que debería lucir, éste tiene 100x181px que después podemos recortar a 1 x 181px.

Guarde este archivo como 'hdr_bkg.png' en nuestra carpeta 'img'.

A continuación crearemos el título del contenido. Nuevamente, abra Photoshop y cree un documento de 934x284 px.
Cree una Rectángulo Redondeado usando la herramienta adecuada, seleccione la forma creada, cree una capa nueva, añada un degradado y dele algún efecto de sombra. 
Luego, tendremos algo como esto:

Guarde este archivo como 'content-title.png' en la carpeta 'img'.

Ahora vamos a crear los recursos que necesitamos para la navegación. Necesitamos dos conjuntos de navegación y una caja blanca.

La caja blanca es sencilla. Solamente cree un rectángulo redondeado de 98 x 58 pixeles y píntelo con color blanco. Asegúrese que el fondo es transparente.

Guarde este archivo como 'white.jpg' en la carpeta 'img'.

Para el ítem de la navegación, abra Photoshop y cree un documento de 490 x 58 pixeles.
Cree un rectángulo redondeado con un tamaño aproximado de 98px x 58px y ponga alto de texto en él. Necesitaremos dos copias de cada texto.
Yo aplique un poco de sombra paralela a cada texto, aunque esto por supuesto, es opcional. Usted puede escoger sus propios colores.

Ahora, simplemente duplique esta capa junto a la línea horizontal. Aplique diferentes colores y textos.

Guarde este archivo como 'nav.jpg' en la carpeta 'img'.

Finalmente, para la franja del fondo, simplemente he usado una herramienta que encuentra en línea llamada Stripe Generator. El resultado tiene una aspecto parecido a este:

Usted puede ver mi configuraciones aquí.
Por supuesto, usted podría crear la franja usted mismo en Photoshop, pero porque no usar una estupenda herramienta web :-)

Paso 3: Código HTML

Ahora vamos a anotar nuestro HTML.

Esto es de acuerdo a nuestro plan de juego explicado en el Paso 1.

He añadido un enlace hacia un archivo 'main.css' que ya está creado y
además, he añadido algunas referencias a algunos archivos javascript. Ya que cada ítem de la navegación es único, le he dado a cada ítem un ID.
Aún necesitaremos algunos estilos comunes para cada una de los ítem del menú, esto hará mucho más fácil para nosotros controlar los estilos en fases posteriores.

También tendremos una caja blanca en la parte superior de cada ítem de la navegación aparecer, cuando pasemos el mouse sobre el menú o cuando un ítem del menú esté siendo seleccionado, por lo que necesitaremos crear otro <div> contenedor para eso. El HTML final debería lucir como este:

Guarde este archivo como 'index.html'. Hasta este punto tenemos esto como nuestra página HTML:

Paso 4: CSS

Déjenos aplicar algunos estilos básicos de la página web. Empezaremos definiendo el fondo y añadiendo un área para un encabezado.

Guarde este archivo como 'main.css' en la carpeta 'css'.

Ahora tenemos algo que luce así:

Ahora vamos a añadir estilos a cada uno de los ítem del menú. Recuerde que queremos la caja blanca en la parte superior de cada ítem,
así que el valor para la propiedad, posición deberá ser; absolute. Agregue los siguientes estilos en nuestro archivo 'main.css'.

Ahora tenemos:

Un problema, la etiqueta <a href> aparece arriba de los ítems del menú, vamos a quitar eso con un número enorme en la propiedad; text indent, que efectivamente lo sacará de la pantalla.
Añada esto a nuestra hoja de estilos.

Ahora debería lucir como este:

Sin embargo, aún tenemos un problema, nos gustaría que el menú de la navegación apareciera debajo de la sombra del encabezado. Podemos lograr eso modificando el estilo de nuestro encabezado.

Ahora, debido a que usamos un archivo .png con transparencia, éste debería lucir así:

¡Perfecto! Vamos añadir el contenido para que podamos conseguir el script de nuestra animación.

Paso 5: Script de la animación

Primero, vamos a descargar el último script de jQuery y colocarlo en la carpeta 'js'.

La animación es básicamente una manipulación del estilo de la posición del fondo.
Desafortunadamente, jQuery tiene una error en la animación del estilo de la posición del fondo. ¡Pero, no se preocupe! Alexander Farkas ha creado un pluging que resuelve este problema.
Descargue el archivo y póngale el nombre jquery-bp.js y guardelo en la carpeta 'js'.

Hay algo que necesitamos entender antes de continuar. He citado desde la documentación del plugin:

Debido a errores en algunos de los navegadores (por ejemplo, Firefox, usted tiene que ajustar la propiedad (inicial) del background-position [posición del fondo] en 'inline':
<div style="background-posiciton: 10px 20px"</div>
- Por supuesto, usted puede lograr esto, también, con JavaScript (jQuery):
$('#background).css({backgroundPosition:'10px 20px'});

De acuerdo, ahora que entendemos eso, vamos a empezar. Ajustaremos el estilo de la posición del fondo para cada ítem en el principio de nuestro script.

Guarde este archivo como 'navigation.js' en la carpeta 'js'.

Ahora uniremos 3 eventos para cada uno de los ítem del menú. Podemos hacer esto invocando una función 'bind'.

Siempre que un usuario pase el puntero sobre un ítem de la navegación, nuestro script llamará a la función 'mMouseOver'.
Cuando el usuario retire el puntero de un ítem de la navegación, entonces nuestro script llamará a la función 'mMouseOut'.
Y cuando el usuario haga clic sobre un ítem de la navegación, nuestro script llamará a la función 'mClick'.

Paso 5.1: Evento Mouse over

Vamos a crear un "guión gráfico" para nuestra animación cuando el puntero se desplaza sobre algún ítem.

En el evento 'Mouse Over':

  • Cambie la imagen del menú de la navegación (brillo) y cambie el cursor a un puntero.
  • La navegación se moverá un poco.
  • La caja blanca se moverá hacia abajo.
  • La caja blanca y el menú de la navegación descenderán.
  • El menú de la navegación y la caja blanca se moverán hacia arriba a su final posición.
  • Y cambie la imagen del menú de la navegación a su estado original.

De acuerdo, vamos a añadir éstas funciones debajo del script anterior:

Necesito explicar varias cosas aquí:

  1. El _getHPos es usado para ajustar la posición horizontal del fondo de la navegación para cada ítem.
    Por ejemplo, el ítem 'Home' del fondo empieza desde 0, la posición horizontal para el fondo de 'About' empieza desde los -98px y así sucesivamente.
  2. Además. note que anteriormente en la función, invocamos la función 'stop'. Hacemos esto para asegurar que todo lo que la animación está ejecutando antes del evento 'mouse over' está detenido.
    ¿Por qué? Añadiremos otra animación después para el evento 'mouse out'.
    Ahora vamos a suponer que el usuario desplazo el puntero sobre un ítem y entonces rápidamente mueva el puntero en alguna parte y otra vez rápidamente pase el puntero encima del mismo ítem.
    Si no detenemos la animación antes de cada evento, habrá un retraso porque algunas partes de la animación estarán en fila o incluso peor la animación se volverá inconsistente y molesta para el usuario.

Paso 5.2: Evento Mouse out

Ahora está hecho. Vamos a crear un "guión gráfico" para el evento 'mouse out'.

En el evento 'Mouse Out':

  • Mueva hacia abajo el ítem de la navegación.
  • Mueva la caja blanca hacia abajo.
  • Mueva la navegación arriba.
  • Mueva los ítem de la navegación arriba a su posición original.
  • Mueva la caja blanca a su posición original (invisible).
  • Regrese el cursor a normal.

El código:

Paso 5.3: Click

¡Casi terminamos! Ahora necesitamos necesitamos controlar cuan un usuario hace clic en el ítem de la navegación.

Por supuesto, usted puede apuntar donde quiera ubicar su ubicación aquí. Esta función en particular dirige su navegador hacia [current_url]/[navigation_id] para que 'home' será '[current_url]/home', para 'about' será '[current_url]/about' y así sucesivamente.

Paso 5.4: Indicador de la página actual

Por supuesto, necesitamos un indicador cuando ya tenemos lista una página. Para eso necesitamos otra clase CSS.
Llamaremos esa clase 'active'. Por ejemplo si ahora estamos en 'home' el archivo HTML se convertirá:

O si estamos en 'about' éste se convertirá:

y así sucesivamente.

Así que ahora la idea es después que una página es cargada nuestro script verificará para ver que ítem de navegación tiene la clase 'active'.
Entonces podemos aplicar un efecto de animación. Y necesitamos asegurarnos que cualquier otro evento ('mouseover', 'mouseout', 'click') no causará cualquier efecto de animación en éste ítem 'active'.

Para eso necesitamos cambiar nuestro código un poco. Aquí esta completo el código después de los cambios:

¡Terminado!

Y con eso tenemos nuestro pequeño menú ingenioso.

Descargar un archivo ZIP de este sitio.

¡Vea un Demo!

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.