Viegli izveidot animētu NAV Ēdienkarte | jQuery Magic: Doing magics ar jQuery

Maijs 5, 2009

Viegli izveidot animētu NAV izvēlni

Posted by: Mahbub In: Misc

Tas ir ļoti īss ziņojums par to, kā mēs varam viegli izveidot animētu navigācijas izvēlni ar jQuery bez spraudni. Jums ir redzējuši horizontāli vai veritical navigācijas izvēlnēm, izplešas un nolīgst tā lielumu uz apgāšanās. Pirms tie javascript sistēma nāca, mums vajadzēja darīt diezgan daudz kodu, lai iegūtu lietas izdarīt. Kāpēc? Tik stulbi pārrobežu pārlūku apstrāde. Es nevēlos sākt no jauna uz IE.

Ok, šeit ir lieta. Mēs esam vienkārši izmantojot Nekārtots saraksts veikt horizontālu izvēlni, kas paplašina un līgumi. Kods ir miris vienkārši. Pieņemsim apskatīt atzīmes 1..

  <div id="navcontainer">
 <ul id="navlist">
	 <li> <a href="http://www.google.com"> Google </ a> </ li>
	 <li> <a href="http://www.yahoo.com"> Yahoo </> </ li>
	 <li> <a href="http://www.msn.com"> MSN </> </ li>
	 <li> <a href="http://www.lycos.com"> Lycos </> </ li>
	 <li> <a href="http://www.baidu.com"> Baidu </> </ li>
 </ Ul>
 </ Div>

Tātad mums ir daži saraksts sūtījumiem. Tātad, lai tās parādās tāpat horizontālajā izvēlnē mēs gribētu vajag kādu css kas izskatās šādi

  * {
 arial , helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
 }
 # Navcontainer ul
 {
 0 ; padding-left: 0;
 0 ; margin-left: 0;
 #222 ; fona krāsa: # 222;
 White ; krāsa: Balta;
 left ; float: left;
 100% ; platums: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: lielos;
 bold ; font-weight: bold;
 }

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

 # Navcontainer ul li
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; fona krāsa: # 222;
 White ; krāsa: Balta;
 none ; text-decoration: none;
 left ; float: left;
 100px ; platums: 100px;
 1px solid #fff ; robežu labo: 1px solid # fff;
 }

Un pēdējā daļa .. Padarot tos deja uz pārvieto kursoru virs. Diezgan vienkārši ar Animate funkciju. Tikai pāris no šīm līnijām zemāk būs darīt to triks. Paskatīties.

  ( ) { $ (Funkcija () {
		 ) . hover ( function ( ) { $ ("# Navlist"). Lidināties (funkcija () {
			 ) . css ( "background-color" , "#369" ) ; $ (Šo) css ("fona krāsa", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (Šo) animēt ({platums: '200px "}, {ilgums: 200, Rinda: viltus});.
		 },
		 funkcija () {
			 ) . css ( "background-color" , "#222" ) ; $ (Šo) css ("fona krāsa", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (Šo) animēt ({platums: '100px "}, {ilgums: 200, Rinda: viltus});.
		 });		
	 });