Home » jQuery 應用

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

[ 日期： | 瀏覽：46,698 | 迴響：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

  6. 請問若我的總圖檔為顯示出來的小圖 高*3，我想要她彈跳出來時是全部顯現，但目前我更改後還是只能顯示2/3，請問我是否還有哪邊尚未更改到?
    原始碼:

    #menu {
    margin:20px 0 0;
    padding: 0;
    height: 84px; /* 選單圖片的高 */
    list-style: none;
    overflow: hidden;
    width: 750px;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    }
    #menu li {
    float: left;
    height: 205px;
    padding-top: 0;
    padding-right: 6px;
    padding-bottom: 0;
    padding-left: 6px;
    }
    #menu li a {
    display: block;
    width: 105px; /* 選單圖片的寬 */
    height: 126px; /* 選單圖片的高 */
    line-height:126px; /* ie suck */
    margin-top:42px; /* 需要設定為圖片寬/2 */
    background-repeat: no-repeat;
    }
    .bt1 {background-image: url(images/P1_03.png);}
    .bt2 {background:url(images/P1_05.png);}
    .bt3 {background:url(images/P1_07.png);}
    .bt4 {background:url(images/P1_09.png);}
    .bt5 {background-image: url(images/P1_11.png);}
    .bt6 {background:url(images/P1_13.png);}

    謝謝!!

    • 這應該只要滑到某選單後, 另一個子區塊展開就可以了!
      而子區塊中的超連結..應該就是一般的用法而已

1 2 3

發表迴響