輕鬆地創建動畫導航菜單| jQuery的魔術：做與jQuery的魔法

05年5月，2009

輕鬆地創建一個動畫導航菜單

發布者：馬赫布卜： MISC

這是一個很短的後如何，我們可以很容易地創建一個沒有任何插件使用jQuery的動畫導航菜單。你一定見過他，臥式或立式導航菜單，擴大或縮小其規模上翻滾。這些javascript框架來之前，我們不得不這樣做相當大量的代碼來完成的事情。為什麼呢？那個愚蠢的跨瀏覽器的處理。我不想在IE瀏覽器啟動。

好吧，這裡的東西。我們只需使用一個無序列表橫向菜單擴展和合同。代碼是死的簡單。我們先看看在標記。

  <div id="navcontainer">
 <ul id="navlist">
	 <LI> <a href="http://www.google.com">谷歌</ A> </ LI>
	 <LI> <a href="http://www.yahoo.com">雅虎</ 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">百度</ A> </ LI>
 </ UL>
 </ DIV>

因此，我們必須有一些列表項。因此，要使他們像橫向菜單中出現，我們就需要一些看起來像這樣的CSS

  * {
 arial , helvetica , sans-serif ; 字體家庭 ：宋體，黑體， 無襯線 ;
 }
 ＃navcontainer UL
 {
 0 ; 填充左 ：0;
 0 ; 保證金左 ：0;
 #222 ; 背景顏色 ：＃222;
 White ; 顏色 ：白色;
 left ; 浮動 ： 左 ;
 100% ; 寬度 ：100％;
 13px ; 字體大小 ：13px;
 uppercase ; 文本轉換 ： 大寫 ;
 bold ; 字體重量 ： 大膽 ;
 }

 display : inline ; } ＃navcontainer UL李{ 顯示 ：內 聯 ;}

 ＃navcontainer UL李一
 {
 0.7em 1.8em ; 填充 ：0.7em 1.8em;
 #222 ; 背景顏色 ：＃222;
 White ; 顏色 ：白色;
 none ; 文字裝飾 ： 無 ;
 left ; 浮動 ： 左 ;
 100px ; 寬度 ：100像素 ;
 1px solid #fff ; 邊界右 ：1px 固體 ＃FFF
 }

和最後的一部分...... 使他們在鼠標懸停的舞蹈。相當簡單的動畫功能。只是下面這些行的情侶會做的伎倆。一看。

  ( ) { $（ 函數 （）{
		 ) . hover ( function ( ) { $（“＃navlist”）。 懸停 （ 函數 （）{
			 ) . css ( "background-color" , "#369" ) ; $（ 本 ）CSS（“背景顏色”，“369”）。
			 ) . animate ( { width : '200px' } , { duration : 200 , queue : false } ) ; $（ 本 ）， 動畫 （{寬度：'200px“}，{工期：200，隊列： 虛假 }）;
		 }，
		 函數 （）{
			 ) . css ( "background-color" , "#222" ) ; $（ 本 ）CSS（“背景顏色”，“222”）。
			 ) . animate ( { width : '100px' } , { duration : 200 , queue : false } ) ; $（ 本 ）， 動畫 （{寬度：'100px“}，{工期：200，隊列： 虛假 }）;
		 }）;		
	 }）;