Home » jQuery 應用

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

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

  3. to 小愛：
    將CSS的部份全部置換成~>

    #menu li {
    margin: 20px 0 0;
    padding: 0 0 0 4px;
    height: 62px; /* 選單圖片的高 */
    list-style: none;
    overflow: hidden;
    width: 98px;
    border-bottom: 1px solid #ccc;
    }
    #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;
    }
    /* 幫每一個 A 連結都加入不同選單圖片 */
    .home {background:url(home.gif);}
    .car {background:url(car.gif);}
    .good {background:url(good.gif);}
    .query {background:url(query.gif);}

    就變成直式選單了

  4. 謝謝derek的回覆 ^^

    另外我想再請問一下,有沒有辦法換另一方式

    就是MENU先顯示首頁ˋ購物車ˋ推薦商品ˋ訂單查詢的文字

    當滑鼠移上去則是顯示圖片在文字上方呢??
    謝謝唷!!

  5. 順便再問一下好了.......

    有沒有辦法讓直式選單的按鈕,每個都上下貼合,

    當移到第二個文字按鈕時,顯示的圖片就直接覆蓋第一個按鈕的文字呢??

    這樣不知道有沒有看的懂^^

  6. to 小愛：

    問題一：先顯示文字滑鼠移過再顯示圖片
    這點讓我匪夷所思，這樣沒有意義吧！正因以圖示來列出選單，若使用者不知道那圖示代表是什麼，可將滑鼠移過顯示出文字，所以才會製作這種效果，若要將圖示跟文字顯示狀態相反過來不就本末倒置了0.0

    問題二：將每個按鈕作貼合，並以滑動覆蓋顯示方式
    1. CSS的部份
    #menu {
    margin: 0;
    padding: 0;
    position: absolute;
    }
    #menu li {
    margin: 0;
    padding: 0 0 0 4px;
    height: 62px; /* 選單圖片的高 */
    list-style: none;
    overflow: hidden;
    width: 98px;
    border-bottom: 1px solid #ccc;
    position: absolute;
    }
    #menu li a {
    width: 98px; /* 選單圖片的寬 */
    height: 62px; /* 選單圖片的高 */
    line-height: 62px; /* ie suck */
    text-indent: -9999px;
    margin-top: 31px; /* 需要設定為圖片寬/2 */
    background-repeat: no-repeat;
    position: absolute;
    }
    /* 幫每一個 A 連結都加入不同選單圖片 */
    .home {background:url(home.gif);}
    .car {background:url(car.gif);}
    .good {background:url(good.gif);}
    .query {background:url(query.gif);}
    2. jQuery的部份
    // 幫 A 連結加上 hover() 事件
    $("#menu li a").hover(function(){ // 當滑鼠移進時..
    // 先停止未完成的動畫再進行新的動畫
    // 變更 margin-top
    $(this).stop().animate({ marginTop: 0 }, 200);
    $(this).parent().prev().hide();
    }, function(){ // 當滑鼠移出時..
    // 先停止未完成的動畫再進行新的動畫
    // 變更 margin-top
    $(this).stop().animate({ marginTop: 31 }, 200);
    $(this).parent().prev().show();
    }).focus(function(){ // 當 A 連結取得焦點時..
    // 讓本身失去焦點
    $(this).blur();
    });
    3. HTML的部份
    ＜div style="height:160px;"＞
    ＜ul id="menu"＞
    ＜li style="z-index:14;"＞＜a href="#" tip="home2" class="home">首頁＜/a＞＜/li＞
    ＜li style="z-index:13;margin-top: 31px;"＞＜a href="#" tip="car2" class="car"＞購物車＜/a＞＜/li＞
    ＜li style="z-index:12;margin-top: 62px;"＞＜a href="#" tip="good2" class="good"＞推薦商品＜/a＞＜/li＞
    ＜li style="z-index:11;margin-top: 93px;"＞＜a href="#" tip="query2" class="query"＞訂單查詢＜/a＞＜/li＞
    ＜/ul＞
    ＜/div＞
    將上方 ＜ 與 ＞ 改為半形，height:160px;請依自行需求調整高度

  7. 謝謝derek的回覆 ^^

    因為要做一些特殊效果,所以才想說先顯示文字在顯示圖片

    有其它的附加作用....^^

    那有辦法嗎??謝謝

1 2 3

發表迴響