Skapa enkelt en animerad NAV meny

5 maj 2009

Inlagd av: Mahbub In: misc

Detta är en mycket kort inlägg om hur vi kan enkelt skapa en animerad navigation meny med jQuery utan plugin. Du måste ha sett horisontella eller veritical navigering menyer som expanderar och drar ihop sin storlek på välta. Innan dessa javascript ramen kom var vi tvungna att göra en hel del kod för att få saker gjorda. Varför? Det dumma kors webbläsare hantering. Jag vill inte börja om på IE.

Ok, här saken. Vi bara använda en oordnad lista för att göra en horisontell meny som expanderar och kontrakt. Koden är död enkel. Låt oss titta 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 några listobjekt där. Så gör dem ut som horisontella menyn vi skulle behöva lite css som ser ut så här

  * {
 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 ; färg: Vit;
 left ; float: left;
 100% ; width: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: versaler;
 bold ; font-weight: bold;
 }

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

 # Navcontainer ul li en
 {
 0.7em 1.8em ; padding: 0.7em 1.8em;
 #222 ; background-color: # 222;
 White ; färg: Vit;
 none ; text-decoration: none;
 left ; float: left;
 100px ; bredd: 100px;
 1px solid #fff ; border-right: 1px solid # fff;
 }

Och den sista delen .. Gör dem dans på mouseover. Ganska enkelt med levande funktionen. Bara några av dessa rader under kommer att göra susen. Ta en titt.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist ett"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) CSS ("background-color", "# 369").
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) animera ({width: '200px '}, {duration: 200, kön: false}).
		 },
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) CSS ("background-color", "# 222").
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) animera ({width: '100px '}, {duration: 200, kön: false}).
		 });		
	 });