Kolayca bir animasyon nav menü oluşturmak

5 Mayıs 2009

Gönderen: In Mahbub: misc

Bu, kolayca herhangi bir eklenti olmadan jQuery ile animasyonlu bir navigasyon menüsü oluşturabilirsiniz nasıl çok kısa bir yazıdır. Rollover üzerindeki boyutunu genişletir ve anlaşmalar yatay veya veritical navigasyon menüleri görmüş olmalı. Bu javascript çerçevesini gelmeden önce, biz halletmek için kod oldukça çok yapmak zorunda. Neden? O aptal çapraz tarayıcı kullanım. IE üzerinde baştan başlamak istemiyorum.

Tamam, burada bir şey. Biz sadece genişletir ve sözleşmeler yatay menü yapmak için bir Sırasız liste kullanıyoruz. Kod ölü basittir. Ilk biçimlendirme bakalım.

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

Bu yüzden bazı liste öğeleri var var. Bunları yatay menü gibi görünür Yani olun biz şuna benzer bazı css ihtiyacım olurdu

  * {
 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 ; Renk: Beyaz;
 left ; float: left;
 100% ; width: 100%;
 13px ; font-size: 13px;
 uppercase ; text-transform: uppercase;
 bold ; font-weight: bold;
 }

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

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

Ve nihai bir parçası .. Onları mouseover üzerinde dans yapma. Animate fonksiyonu ile oldukça basit. Hemen altında şu satırları birkaç hile olacaktır. Bir göz atın.

  ( ) { $ (Function () {
		 ) . hover ( function ( ) { $ ("# Navlist a"). Hover (function () {
			 ) . css ( "background-color" , "#369" ) ; $ (This) css ("background-color", "# 369").;
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $ (This) ({width: '200px '}, {süresi: 200, kuyruğu: false}) animasyon.;
		 },
		 function () {
			 ) . css ( "background-color" , "#222" ) ; $ (This) css ("background-color", "# 222").;
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $ (This) ({width: '100px '}, {süresi: 200, kuyruğu: false}) animasyon.;
		 });		
	 });