Home » jQuery 應用

[jQ]用 jQuery 做選單 – 彈起式頁籤選單

[ 日期： | 瀏覽：46,984 | 迴響：35 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

還記得上一篇的「彈起式頁籤選單」嗎？現在我們要把純 CSS 做出來的選單再加上更進階的動畫效果！因此，現在要教各位如何使用 jQuery 來把彈跳式頁籤選單進行加強。

HTML 部份不需要變動，而 CSS 部份則是要把觸發選單事件的 #menu li a:hover { } 給拿掉或先註解起來就可以了：

檢視原始碼 CSS
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

#menu {
	margin: 20px 0 0;
	padding: 0;
	height: 62px;		/* 選單圖片的高 */
	list-style: none;
	overflow: hidden;
	width: 432px;		/* 98 * 4 + 5 * 8 */
	border-bottom: 1px solid #ccc;
}
#menu li {
	float: left;
	padding: 0 5px;
}
#menu li a {
	display: block;
	width: 98px;		/* 選單圖片的寬 */
	height: 62px;		/* 選單圖片的高 */
	line-height: 62px;	/* ie suck */
	text-indent: -9999px;
	margin-top: 31px;	/* 需要設定為圖片寬/2 */
	background-repeat: no-repeat;
}
/*
#menu li a:hover {
	margin-top: 1px;	// 當滑鼠移到選單上時...
}
*/
/* 幫每一個 A 連結都加入不同選單圖片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.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() 事件
	$("#menu li a").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		$(this).stop().animate({
			marginTop: 1
		}, 200);
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		$(this).stop().animate({
			marginTop: 31
		}, 200);
	}).focus(function(){	// 當 A 連結取得焦點時..
		// 讓本身失去焦點
		$(this).blur();
	});
});

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

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

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

jquery_animate_menu_2_1

有沒有發現它跟純用 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

$(function(){
	// 幫 A 連結加上 hover() 事件
	$("#menu li a").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		$(this).stop().animate({
			marginTop: 1
		}, 200);
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		// 動畫效果加上 easeOutBounce
		$(this).stop().animate({
			marginTop: 31
		}, 200, "easeOutBounce");
	}).focus(function(){	// 當 A 連結取得焦點時..
		// 讓本身失去焦點
		$(this).blur();
	});
});

最後可以試試實際的效果反應，也許各位會喜歡這樣的頁籤選單效果的。

範例 1 範例 2

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

35 筆針對 [jQ]用 jQuery 做選單 – 彈起式頁籤選單 的迴響

1 2 3

  2. 有關那個彈起頁籤選單........

    做出來的效果和我想的有出入說>"<

    第一個按鈕的效果就是我要的,但是第二個按鈕我是要滑上來的部份遮住第一個按鈕喔!!

    謝謝~你做的那個網頁好完整喔!!!3QQQQ

  5. 我想問一下唷!!!
    剛剛你說參考的ㄉ那個範例阿!!
    如果做成垂直往上移動的...
    有沒有辦法做成這樣子的呢
    如:
    寬度一樣(男 男丁 小 小神童)
    有沒有可能當我滑鼠移到小 小神童時,前面的那個小是往上移遮住男 男丁第一個男呢??

    這樣會不會看不懂我說的>"<

    • 這樣....應該有點怪吧...
      能簡單的畫一下在未點選到時及點選到最後一個時的選單排列圖嗎?

  8. 請問
    .home {background:url(home.gif);}
    .car {background:url(car.gif);}
    .good {background:url(good.gif);}
    .query {background:url(query.gif);}
    這些是連結圖片的位子嗎?
    為什麼沒有顯示圖片呢!

  9. 請問
    .home {background:url(home.gif);}
    .car {background:url(car.gif);}
    .good {background:url(good.gif);}
    .query {background:url(query.gif);}
    這些是連結圖片的位子嗎?
    為什麼沒有顯示圖片呢!

1 2 3

發表迴響