Voit helposti luoda animoituja nav menu

05 toukokuu 2009

Kirjoittanut: Mahbub In: misc

Tämä on hyvin lyhyt virka miten voimme helposti luoda animoituja navigointipolkuun kanssa jQuery ilman plugin. Sinun on nähnyt vaaka tai veritical valikoidensa joka laajenee ja supistuu sen kokoa kaatuessa. Ennen näitä javascript puitteet tulivat meidän piti tehdä aika paljon koodin saada asiat tehtyä. Miksi? Tuo typerä risti selain käsittelyyn. En halua aloittaa alusta IE.

Ok, tässä se juttu. Olemme yksinkertaisesti käyttämällä Järjestämätön lista tehdä horisontaalinen menu, joka laajenee ja supistuu. Koodi on kuollut yksinkertainen. Katsotaan markup ensin.

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

Joten meillä on lista kohteita siellä. Joten ne näyttämään horisontaalinen menu olimme tarvitsevat css joka näyttää tältä

  * {
 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 ; Väri: Valkoinen;
 left ; float: left;
 100% ; leveys: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: isoja;
 bold ; font-weight: bold;
 }

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

 # Navcontainer ul li
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; Väri: Valkoinen;
 none ; text-decoration: none;
 left ; float: left;
 100px ; width: 100px;
 1px solid #fff ; raja-right: 1px solid # fff;
 }

Ja viimeinen osa .. Making ne tanssi hiiri viedään sen päälle. Varsin yksinkertainen elollinen toiminto. Vain pari Näiden linjojen alla tepsiä. Katsomaan.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (Tämä). CSS ("background-color", "# 369");
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (Tämä). Animoida ({width: '200px "}, {kesto: 200, jono: false});
		 },
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (Tämä). CSS ("background-color", "# 222");
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (Tämä). Animoida ({width: '100px "}, {kesto: 200, jono: false});
		 });		
	 });