Facilmente crear un menú de navegación animado

05 de maio de 2009

Publicado por: Mahbub En: Varios

Este é un post moi curto de como podemos facilmente crear un menú de navegación animado con jQuery sen plugin. Ten que ver os menús de navegación horizontal ou veritical que se expande e contráese o seu tamaño en capotamento. Antes destes cadro javascript veu, tivemos que facer unha chea de código para as cousas feitas. Por que? Que a manipulación navegador parvo cruz. Eu non quero comezar de novo no IE.

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

  <div id="navcontainer">
 id = "navlist"> <ul
	 <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>

Polo tanto, temos algúns elementos da lista de alí. Entón, fai-os aparecer como menú horizontal que ía ter algún CSS ten esta aparencia

  * {
 arial , helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
 }
 # Navcontainer ul
 {
 0 ; padding-left: 0;
 0 ; marxe esquerda: 0;
 #222 ; background-color: # 222;
 White ; Cor: Branco;
 left ; float: left;
 100% ; ancho: 100%;
 13px ; font-size: 13px;
 uppercase ; texto-convertela: uppercase;
 bold ; font-Weight: bold;
 }

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

 # Navcontainer ul li a
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; Cor: Branco;
 none ; text-decoration: none;
 left ; float: left;
 100px ; width: 100px;
 1px solid #fff ; Ficheiro: Flag of-right: 1px solid # FFF;
 }

E a parte final .. Facelos danza no mouseover. Moi sinxelo coa función de animar. Só algunhas das liñas de abaixo ha facer o truque. Bótalle un ollo.

  ( ) { Función $ (() {
		 ) . hover ( function ( ) { $ ("# Navlist a"). Hover (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}).;
		 });		
	 });