16/4/2014

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

Me gusta 15

Hay muchas maneras de crear un men de navegacin para un sitio web, anteriormente habamos hablado de como Crear Men Deslizante Fcilmente Con JQuery.Mmenu, un plugin de jQueryespecial para crear mens deslizantes. Uno de los mens de navegacin ms populares es el de navegacin desplegable con estilo acorden que se desliza hacia arriba y hacia abajo, mostrando sus submens. En este paso a paso, vamos a construir un men de navegacin con efecto deslizante utilizando CSS3, junto con algunos cdigos de jQuery para gestionar la animacin del efecto. La siguiente imagen es el resultado del ejercicio que explicaremos:

http://www.hostdime.com.co/blog/crea-un-menu-de-navegacion-deslizante-con-css3-y-jquery-en-4-sencillos-pasos/

1/5

16/4/2014

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

Usando Font Awesome (Web Icons)

Para este tutorial, en lugar de utilizar los ordinarios iconos .png para la navegacin, vamos a utilizar Font Awesome . Hay muchas ventajas en el uso de fuentes web o iconos de la web: Hay gran variedad de iconos para elegir Puedes ahorrar dinero; no tienes que pagar por los iconos Puedes ahorrar tiempo; utiliza rpidamente CSS para incorporarlos en tu diseo Tiempo de carga ms rpido con los iconos de las Web Fontsmantienen automticamente con las nuevas versiones de los navegadores web Las Web Fonts son SEO amigables. Hay dos maneras de cmo usar las Font Awesome en nuestro proyecto de diseo. La primera de ellas es mediante el uso de enlaceBootstrapCDN en el head del HTML y el segundo es mediante la descarga de los archivos de fuentes impresionantes desde el sitio web de Font Awesome y luego usar el enlace CSS por defecto en el head del HTML. Para saber ms sobre esto, puede consultar la pagina deFont Awesome . Para este tutorial, vamos a usar el enlace de BootstrapCDN para acceder a las fuentes e iconos de Font Awesome .

Cdigo HTML
En nuestro archivo HTML, vamos a aadir la tpica estructura de HTML5
http://www.hostdime.com.co/blog/crea-un-menu-de-navegacion-deslizante-con-css3-y-jquery-en-4-sencillos-pasos/ 2/5

16/4/2014

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

y una serie de enlaces en nuestra seccin del head. Esto incluir el enlace al archivo CSS, enlace al BootstrapCDN y nuestro archivo de la biblioteca jQuery. +e x p a n ds o u r c e La estructura HTML del men ser una lista desordenada donde se formateara el elemento de men primario con una etiqueta H3. La etiqueta H3 consta de un icono de men envuelto en una etiqueta div. El elemento de men primario tendr un icono del signo ms (+) un signo menos (-) dependiendo si se esta o no mostrando el contenido anidado en esa opcin. Puede consultar la guia sobre el uso de las clases para el uso de las imgenes de esta librera en el siguiente enlace . +e x p a n ds o u r c e Si mirara la pagina en este momento, obtendr el siguiente resultado:

Cdigo CSS
El estilo aplicado en este tutorial consiste en mostrar el bloque en un elemento principal, y ocultar los submens de los mens padres, el color de fondo, iconos de men y los iconos mas y menos. Para esta parte, damos estilos mediante la etiqueta H3. +e x p a n ds o u r c e Si volvemos a mirar lo que llevamos de momento en el navegador veremos lo siguiente:

http://www.hostdime.com.co/blog/crea-un-menu-de-navegacion-deslizante-con-css3-y-jquery-en-4-sencillos-pasos/

3/5

16/4/2014

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

A continuacin, vamos a poner los iconos del men de la izquierda y el icono de signo ms a la derecha. +e x p a n ds o u r c e Si volvemos a revisar los cambios en el navegador veremos que se ha mejorado tan solo un poco:

Por ltimo, vamos a poner estilos a los submens, pero, por defecto, vamos a ocultarlos y luego los mostramos usando animacin de jQuery. +e x p a n ds o u r c e Revisemos una vez mas lo que llevamos de momento y veremos que la

http://www.hostdime.com.co/blog/crea-un-menu-de-navegacion-deslizante-con-css3-y-jquery-en-4-sencillos-pasos/

4/5

16/4/2014

Crea Un Men De Navegacin Deslizante Con CSS3 Y jQuery En 4 Sencillos Pasos

apariencia mejoro bastante:

El Efecto Deslizante Con jQuery

Cuando todo el elemento del bloque se ve correctamente, tenemos que usar el efecto con JavaScript. En el cdigo de jQuery, se ha creado una variable para tener como referencia del icono del men actual utilizando el cdigo: $currIcon=$(this).find(span.the-btn > i). Entonces, puedo cambiar todos los iconos de nuevo en el estado contenido (con el icono +). A continuacin, utilizando toggleClass, puedo cambiar los iconos ms/menos en el elemento almacenado previamente en $currIcon. +e x p a n ds o u r c e Y listo, con el anterior cdigo tendramos funcionando nuestro men con CSS3 y jQuery, con un bonito efecto deslizante.

http://www.hostdime.com.co/blog/crea-un-menu-de-navegacion-deslizante-con-css3-y-jquery-en-4-sencillos-pasos/

5/5