Facilmente crear un menú de navegación animado

05 de maio de 2009

Publicado por: Mahbub In: Misc

Este é un post curto de como podemos facilmente crear un menú de navegación animado con jQuery sen ningún plugin. Ten que ver menús de navegación horizontal ou veritical que se expande e contrae o seu tamaño en capotamento. Antes estes cadro javascript veu, tivemos que facer unha chea de código para obter as cousas. Por que? Que a manipulación cross navegador estúpido. Non quero comezar de novo en IE.

Ok, aquí está a cousa. Estamos simplemente usando unha lista non ordenada para facer un menú horizontal, que se expande e contráese. Código é simple morto. Imos ollar para a reserva en primeiro lugar.

 <div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> Google </ a> </ li> <li> <a href = "http://www.yahoo.com"> Yahoo! </ a> </ li> <li> <a href="http://www.msn.com"> MSN </ a> </ li> <li> <a href="http://www.lycos.com"> Lycos </ a> </ li> <li> <a href="http://www.baidu.com"> Baidu </ a> </ li> </ ul> </ div>

Entón, nós temos algúns elementos da lista alí. Entón, facelos parecer como menú horizontal necesitariamos uns css que ten esta aparencia

 : inline ; } #navcontainer ul li li {display: inline;} # navcontainer ul li

E a parte final .. Mediante a bailar en mouseover. Moi simple, coa función de animar. Só algunhas destas liñas de abaixo pode facer o truco. Bótalle un ollo.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist a"). Pair (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) CSS ("background-color", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) animar ({width: '200px '}, {duration: 200, cola: false}).;
		 }
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) CSS ("background-color", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) animar ({width: '100px '}, {duration: 200, cola: false}).;
		 });		
	 });