Home » jQuery 應用

[jQ]用 jQuery 做選單 – 動畫賀聯式選單

範例 1
範例 2
沒錯!只要 900 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

上一次有介紹過「賀聯式選單」的效果,雖然純用 CSS 能完成這樣已經很不錯了,但如果還能加上更進階的動畫效果的話,那應該會更優吧!因此,現在要教各位如果使用 jQuery 來把賀聯式選單進行加強。

原來範例中的 HTML 部份不需要變動,而 CSS 部份則是要把觸發選單事件a:hover { }拿掉或先註解起來就可以了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
ul li {
	float: left;
}
 
ul li a {
	width: 100px;
	height: 50px;
	display: block;
	line-height: 50px;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
 
/*
ul li a:hover {
	height: 150px;
}
*/
 
ul li a div {
	color: #fff;
	line-height: 16px;
	font-weight: bold;
	margin-top: 73px;
	padding-top: 7px;
	border-top: 1px dotted #fff;
}
 
.t1{background: #08f2d6 url(01.gif);}
.t2{background: #1209f1 url(02.gif);}
.t3{background: #a202e2 url(03.gif);}
.t4{background: #f4e603 url(04.gif);}
.t5{background: #55df07 url(05.gif);}
.t6{background: #02a8f3 url(06.gif);}
.t7{background: #f6025e url(07.gif);}

現在我們就要用 jQuery 來寫選單的觸發事件:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
	// 幫 A 連結加上 hover() 事件
	$("a").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫再進行新的動畫
		// 展開完整的選項內容
		$(this).stop().animate({
			height: 150
		}, 600);
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫再進行新的動畫
		// 隱藏選項下方的內容
		$(this).stop().animate({
			height: 50
		}, 600);
	}).focus(function(){	// 當 A 連結取得焦點時..
		// 讓本身失去焦點
		$(this).blur();
	});
});

這邊只是用到簡單的 hover() 事件跟基本的 animate() 動畫效果,另外,瀏覽者可能會在選單的部份移進移出的,為了讓動畫能馬上的呈現,所以要先使用 stop() 來停止未完成的動畫後再來執行。

最後的 foucs() 事件是為了避免當 A 連結被點擊或是選取時而產生虛線框,因此我們透過 blur() 的方式讓它再失去焦點。

動畫賀聯式選單-1

現在使用 jQuery 來加上動畫效果後,讓我們來試著瀏覽看看效果囉

動畫賀聯式選單-2

有沒有發現它跟純用 CSS 所寫出來的展現效果有所差異呢?!原本的是馬上就全部都顯現了,現在則是慢慢的展開,有沒有覺得比較有趣呢!

不過 jQuery 內建的進階動畫效果有限,為了讓選單能用更活潑的方式來展現,我們還可以搭配 jQuery Easing 套件來擴充動畫效果。jQuery Easing 已經內建了 30 多種不同的效果,各位可以一一試看看那個是符合自己的需求的,我這邊就用會產生"ㄉㄨㄞ ㄉㄨㄞ"動畫的 easeOutBounce 效果:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function(){
	// 幫 A 連結加上 hover() 事件
	$("a").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫再進行新的動畫
		// 展開完整的選項內容
		// 動畫效果加上 easeOutBounce
		$(this).stop().animate({
			height: 150
		}, 600, "easeOutBounce");
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫再進行新的動畫
		// 隱藏選項下方的內容
		// 動畫效果加上 easeOutBounce
		$(this).stop().animate({
			height: 50
		}, 600, "easeOutBounce");
	}).focus(function(){	// 當 A 連結取得焦點時..
		// 讓本身失去焦點
		$(this).blur();
	});
});

最後可以試試實際的效果反應,相信各位會喜歡這樣的選單效果的。

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

6 筆針對 [jQ]用 jQuery 做選單 – 動畫賀聯式選單 的迴響

  1. 不好意思 我用這個範例去製作選單的時候 發覺所有網站圖片都會因為$("a").hover(function() 這條程式碼出現縮小的效果耶... 有辦法能只限定選單那個部分就好嗎? 謝謝

  2. 可否請教一下
    該頁最上方的選單是否也是利用此原理完成(首頁/jQuery/JavaScript....)
    或是有其他的範例可供參考嗎?

發表迴響