Ľahko vytvoriť animovaný nav menu | jQuery kúzla: Robiť mágiu s jQuery

05.05.2009

Ľahko vytvárať animované menu, nav

Pridal: Mahbúb In: misc

To je veľmi krátky príspevok o tom, ako sa dá ľahko vytvoriť animovaný navigačné menu s jQuery bez pluginu. Musíte vidieť vodorovné alebo veritical navigačné menu, ktoré sa zväčšuje alebo zmenšuje jeho veľkosť na prevrátenie vozidla. Pred ich rámec javascript prišla, museli sme urobiť veľa kódu sa dostať veci urobiť. Prečo? Tak hlúpy kríž prehliadač manipulácie. Nechcem začať znovu na IE.

Ok, tu je to vec. Sme jednoducho pomocou neusporiadané zoznamu tak, aby horizontálne menu, ktoré sa rozpína a zmršťuje. Kód je mŕtvy jednoduché. Poďme sa pozrieť na značky ako prvý.

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

Takže máme nejaký Zoznam položiek tam. Takže sa im javí ako horizontálna menu, budem potrebovať nejaké CSS, ktorý vyzerá takto

  * {
 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 ; Farba: biela;
 left ; float: left;
 100% ; šírka: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: uppercase;
 bold ; font-weight: bold;
 }

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

 # Navcontainer ul ak
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; Farba: biela;
 none ; text-decoration: none;
 left ; float: left;
 100px ; width: 100px;
 1px solid #fff ; border-right: 1px solid # fff;
 }

A posledná časť .. Robiť je tanec na bublinové nápovede. Celkom jednoduché, vďaka živej funkcie. Len pár z týchto riadkov nižšie bude stačiť. Pozrite sa.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) css ("background-color", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) animácie ({width: '200px '}, {dĺžka: 200, fronta: false}).;
		 }
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) css ("background-color", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) animácie ({width: '100px '}, {dĺžka: 200, fronta: false}).;
		 });		
	 });