Nemt at skabe en animeret nav menu

5 maj 2009

Indsendt af: Mahbub I: misc

Dette er en meget kort indlæg om, hvordan vi kan nemt skabe en animeret navigation menu med jQuery uden nogen plugin. Du må have set vandrette eller veritical navigationsmenuer, der udvider og trækker dens størrelse på rollover. Før disse javascript rammer kom, vi havde at gøre en hel masse kode for at få tingene gjort. Hvorfor? Det dumme cross browser håndtering. Jeg ønsker ikke at starte forfra på IE.

Ok, her er den ting. Vi er simpelthen ved hjælp af en uordnet liste at lave en horisontal menu, der udvider og kontrakter. Kode er død enkel. Lad os se på opmærkningen først.

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

Så vi har nogle listeelementer der. Så få dem til at fremstå som vandret menu vi havde brug for noget css der ser sådan ud

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

Og den sidste del .. Gøre dem danse på mouseover. Ganske enkelt med levende funktion. Bare par af disse linjer under vil gøre det trick. Tag et kig.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist en"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (Denne) CSS ("background-color", "# 369").
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (Denne) animere ({bredde: '200px '}, {varighed: 200, kø: false}).
		 }
		 funktion () {
			 ) . css ( "background-color" , "#222" ) ; $ (Denne) CSS ("background-color", "# 222").
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (Denne) animere ({bredde: '100px '}, {varighed: 200, kø: false}).
		 });		
	 });