Crea fàcilment un menú de navegació animats | màgia de jQuery: Fer Magics amb jQuery

5 maig 2009

Crea fàcilment un menú de navegació animada

Publicat per: Mahbub En: miscel · lanis

Aquest és un missatge molt breu de com podem crear fàcilment un menú de navegació animada amb jQuery sense cap tipus de plug-in. Vostè ha d'haver vist els menús de navegació horitzontals o veritical que s'expandeix i es contrau a la seva grandària en la bolcada del vehicle. Abans d'aquests framework javascript vi, que havíem de fer un bon munt de codi per obtenir les coses. Per què? Que el maneig estúpid navegadors. No vull tornar a començar en IE.

Ok, aquí està la cosa. Simplement estem utilitzant una llista desordenada de fer un menú horitzontal que s'expandeix i es contrau. El codi és simple morts. Vegem el marcat en primer lloc.

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

Així que tenim alguns elements de la llista allà. Així que els fan aparèixer com a menú horitzontal que anàvem a necessitar una mica de CSS que té aquest aspecte

  * {
 arial , helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
 }
 # Navcontainer ul
 {
 0 ; padding-left: 0;
 0 ; margin-left: 0;
 #222 ; background-color: # 222;
 White ; Color: Blanc;
 left ; float: left;
 100% ; width: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: uppercase;
 bold ; font-weight: bold;
 }

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

 # Navcontainer ul li un
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; Color: Blanc;
 none ; text-decoration: none;
 left ; float: left;
 100px ; ample: 100px;
 1px solid #fff ; border-right: 1px solid # fff;
 }

I la part final .. Fent-los ballar en mouseover. Molt senzill amb la funció d'animar. Només dues d'aquestes línies de baix farà el truc. ¡Fes un cop d'ull.

  ( ) { Funció $ (() {
		 ) . hover ( function ( ) { $ ("# Navlist a"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) css ("background-color", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) animi ({width: '200px "}, {duration: 200, fila: false}).;
		 },
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) css ("background-color", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) animi ({width: '100px "}, {duration: 200, fila: false}).;
		 });		
	 });