Dette er en veldig kort innlegg om hvordan vi enkelt kan lage en animert navigasjonsmeny med jQuery uten plugin. Du må ha sett horisontale eller veritical navigeringsmenyer som utvider seg og trekker størrelsen på rollover. Før disse javascript rammeverk kom, måtte vi gjøre ganske mye kode for å få ting gjort. Hvorfor? Det dumme kors nettleser håndtering. Jeg ønsker ikke å starte over på IE.

Ok, her er tingen. Vi bare bruker en ikke-sorterte liste å lage en horisontal meny som utvider seg og kontrakter. Kode er død enkel. La oss se på markeringen 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 noen listeelementer der. Så gjør dem vises som horisontale menyen vi ville trenge litt css som ser slik ut

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

Og den siste delen .. Å gjøre dem dans på mouseover. Ganske enkelt med Animer funksjonen. Bare par av disse linjene under vil gjøre utslaget. Ta en titt.

	 ( ) { $ ( "#navlist $ (Funksjon () {$ ("# navlist 

Det er det! Se det i aksjon