Crear una Estupenda Navegación Animada con CSS y jQuery

() translation by (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.


<!-- header section-->
<div id="header"></div>

<!-- navigation section-->  	
<div id="navigation" class="container">
	<div><a href="#">home</a></div>
	<div><a href="#">about</a></div>
	<div><a href="#">services</a></div>
	<div><a href="#">solutions</a></div>
	<div><a href="#">contact</a></div>
</div>

<!-- container section-->
<div class="container">
	<div id="content-title"></div>
	<!-- rest of the content -->
</div>

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  	<!--our CSS file-->
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<!--jQuery library-->
	<script type="text/javascript" src="js/jquery.js" ></script>
	<!--jQuery plugin, we’ll get to this later-->
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<!--Our animation script-->
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home"><a href="home">home</a></div>
		<div id="about"><a href="about">about</a></div>
		<div id="services"><a href="services">services</a></div>
		<div id="solutions"><a href="solutions">solutions</a></div>
		<div id="contact"><a href="contact">contact</a></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

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:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>slick animated menu</title>
  
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-bp.js" ></script>
	<script type="text/javascript" src="js/navigation.js" ></script>
</head>
<body>
	<div id="header"></div>
	<div id="navigation" class="container">
		<div id="home" class="pri-nav"><div><a href="home">home</a></div></div>
		<div id="about" class="pri-nav"><div><a href="about">about</a></div></div>
		<div id="services" class="pri-nav"><div><a href="services">services</a></div></div>
		<div id="solutions" class="pri-nav"><div><a href="solutions">solutions</a></div></div>
		<div id="contact" class="pri-nav"><div><a href="contact">contact</a></div></div>
	</div>
	<div class="container">
		<div class="content">
			<div id="content-title"></div>
			<!-- the rest of the content-->
		</div>
	</div>
</body>

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.


body {
	background: url(../img/body-bkg.jpg) repeat scroll;
	margin: 0;
	padding: 0;
}

.containe r{
	margin: 0pt auto;
	width:950px;
}
#header {
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
}

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'.


#navigation{
	height:60px;
}

#home, #home div, 
#about, #about div, 
#services , #services div, 
#solutions, #solutions div, 
#contact,  #contact div {
	height:80px;
	position:absolute;
	width:97px;
	float:left;
}

#home, #about, #services, #solutions, #contact{
	background-image: url(../img/nav.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	top:171px;
}

#home{
	background-position: 0px -25px;
	margin-left:6px;
}

#about{
	background-position: -98px -25px;
	margin-left:105px;
}

#services{
	background-position: -196px -25px;
	margin-left:204px;
}

#solutions{
	background-position: -294px -25px;
	margin-left:303px;
}

#contact{
	background-position: -392px -25px;
	margin-left:402px;
}

#home div, #about div, #services div, #solutions div, #contact div {
	background-image: url(../img/white.jpg);
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 0px -60px;	
}

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.


.pri-nav a{
	display:block;
	text-decoration:none;
	text-indent:-30000px; 
}

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.


#header{
	background: url(../img/hdr-bkg.jpg) repeat-x scroll;
	height:181px;
	position:absolute;
	z-index :100; /* ensure the header is on top of navigation area */
	top: 0px;
	left:0px;
	width:100%;
}

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.


.content{
	margin-top:160px;
}

#content-title{
	background: url(../img/content.jpg) no-repeat scroll;
	height:323px;
	position:absolute;
	width:100%;
}

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.


// id for each of our menu items
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];
$(document).ready(function(){
  setBkgPos();
});

function setBkgPos()
{
  for ( i = 0; i < nav.length; i++ ){
    $(nav[i]).css({backgroundPosition: i*(-98) + 'px -25px'});
    $(nav[i] + ' div').css({ backgroundPosition: '0px -60px'});
  }
}

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'.


$(document).ready(function(){
  setBkgPos();

  // bind the event to function here
  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }
});

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:


function _getHPos( id )
{
  for ( i = 0; i < nav.length; i++ ){
    if ( '#' + id == nav[i] ){
      return i*(-98);
    }
  }	
  return 0;
}

function mMouseOver(e)
{	
  $(this)
  // stop any animation that took place before this
  .stop()
  // step 1. change the image file and change the cursor 
  .css({backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer'})
  // step.2 move up the navigation item a bit
  .animate({ backgroundPosition:'(' + _getHPos( this.id ) +'px -30px}'},"fast",
    // this section will be executed after the step.2 is done
	function(){ 
	  $(this)
	    .children()
		  // step. 3 move the white box down
		  .animate({backgroundPosition:'(0px -40px)'},20)
		  // step 4. move the white box down
		  .animate({backgroundPosition:'(0px -20px)'},"fast");
	  $(this)
		// step 4. move the navigation item down
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)'},"fast")
		// step 5. move the navigation item to its final position
		.animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)'},"fast");
	  // store the parent element id for later usage
	  var parent = this;
	  $(this)
		.children()
		  // step 5. move the white box to its final position
		  .animate( {backgroundPosition:'(0px -45px)'},"fast",
			// this section will be executed after the step.2 is done
			function(){
			  // step.6 change the image to its original image	
			  $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
			});	
	});
}

Necesito explicar varias cosas aquí:

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.
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:


function mMouseOut(e)
{			
  $(this)
  // stop any animation that took place before this
  .stop()
  // step.1 move down navigation item
  .animate({backgroundPosition:'(' + _getHPos( this.id ) +'px 40px )'}, "fast", 
    // this section will be executed after the step.1 is done
    function(){
      // step.2 white box move really fast
      $(this).children().animate({backgroundPosition:'(0px 70px)'}, "fast");
      // step 3. move navigation item up
      $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -40px)'}, "fast", 
      // this section will be executed after the step.3 is done
        function(){
          // step 4. move navigation item ot its original position
          $(this).animate( {backgroundPosition:'(' + _getHPos( this.id ) +'px -25px)'}, "fast",
            // this section will be executed after the step.4 is done
            function(){
              // move white box to its original position, ready for next animation
              $(this).children().css({ backgroundPosition:'0px -60px'});
            })
        })
    })
    .css({backgroundImage: 'url(img/nav.jpg)', cursor: ''});
}

Paso 5.3: Click

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


function mClick(e)
{
  location.href = this.id;
}

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á:

1
2	<div id="home" class="pri-nav active"><div><a href="home">home</a></div></div>

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

1
2	<div id="about" class="pri-nav active"><div><a href="about">about</a></div></div>

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:


var site_url = '';
var nav  = [ '#home', '#about', '#services', '#solutions', '#contact' ];

$(document).ready(function(){
  setBkgPos();

  for ( i = 0; i < nav.length; i++ ) {
    $(nav[i]).bind( 'mouseover', mMouseOver );
    $(nav[i]).bind( 'mouseout', mMouseOut );
    $(nav[i]).bind( 'click', mClick );
  }

  for ( i = 0; i < nav.length; i++ ) {
    // element with ‘active’ class will  start animation 
    if ( $(nav[i]).get(0).className.indexOf('active') >= 0 ){
      $(nav[i])
      .animate({ backgroundPosition:'(' + _getHPos( nav[i] ) +'px -30px}'},"fast",
        function(){ 
          $(this)
            .children()
            .animate({backgroundPosition:'(0px -40px)'},20)
            .animate({backgroundPosition:'(0px -20px)'},"fast");
          $(this)
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 50px)'},"fast")
            .animate({backgroundPosition:'(' + _getHPos( nav[i] ) +'px 25px)'},"fast");
          var parent = this;
          $(this)
            .children()
            .animate( {backgroundPosition:'(0px -45px)'},"fast",
			  function(){
                $(parent).animate({backgroundPosition:'(' + _getHPos( parent.id ) +'px 25px)'},"fast");
                $(parent).css({backgroundImage: 'url(img/nav.jpg)'});
              });
        });
        break;
    }
  }
});

¡Terminado!

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

Descargar un archivo ZIP de este sitio.

¡Vea un Demo!