Madaling lumikha ng isang animated na menu nav

05 Mayo, 2009

Posted by: Mahbub Sa: Misc

Ito ay isang napaka-maikling post ng kung paano namin maaaring madaling lumikha ng isang animated na menu nabigasyon na may jQuery nang walang anumang mga plugin. Dapat na nakita mo pahalang o veritical navigation menu na nagpapalawak at kontrata ang laki nito sa rollover. Bago dumating ang mga javascript framework, nagkaroon namin na gawin ang masyadong maraming ng code upang makakuha ng mga bagay na nagawa. Bakit? Na bobo kalyeng browser handling. Hindi ko nais upang magsimulang muli sa IE.

Ok, dito ang mga bagay. Lamang kami ay gumagamit ng isang unordered listahan upang gumawa ng isang pahalang na menu na nagpapalawak at kontrata. Code ay patay simple. Hayaan ng tingnan muna ang markup.

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

Kaya kami ay may ilang mga listahan ng mga item doon. Kaya gumawa lumitaw ang mga ito tulad ng pahalang na menu gusto namin kailangan ang ilang mga css na ganito ang hitsura

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

At ang huling bahagi ... Paggawa ng mga ito ng sayaw sa mouseover. Medyo simpleng sa animate function na. Lamang ang ilang sa mga linya sa ibaba ay gawin ang lansihin. Mayroon ng isang hitsura.

  ( ) { $ (Ng function () {
		 ) . hover ( function ( ) { $ ("# Navlist isang"). Pasadahan (ang function () {
			 ) . css ( "background-color" , "#369" ) ; $ (Ito) css ("background-kulay", "# 369");
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (Ito) animate ({lapad: '200px '}, {tagal: 200, queue: maling});
		 },
		 ang function () {
			 ) . css ( "background-color" , "#222" ) ; $ (Ito) css ("background-kulay", "# 222");
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (Ito) animate ({lapad: '100px '}, {tagal: 200, queue: maling});
		 });		
	 });