Home » jQuery 應用

[jQ]用 jQuery 做選單 – 翻選式選單

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

筆者有介紹過一個 Background-Position Animation Plugin，它讓 jQuery.animate 能支援原本所不支援的 background-position 屬性。所以我們就能使用它來做到更多有趣的動畫效果，像這次要教的翻選式選單也是玩玩 background-position 屬性的。

選單的部份筆者是用 ul 來做的：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11

<body>
	<h3>水平選單(圖片是垂直)</h3>
	<ul id="hmenu">
		<li><a href="#" class="v1">男丁</a></li>
		<li><a href="#" class="v2">jQuery</a></li>
		<li><a href="#" class="v3">小神童</a></li>
		<li><a href="#" class="v4">蠟筆小新</a></li>
	</ul>
 
	<br class="clear" />
</body>

在看 CSS 設定之前先來看一下選單的背景圖片

v3

圖片雖然有上下兩排，但一開始我們只要讓它顯示上半部，當滑鼠移到選單時再切換到顯示下半部，讓整個動作有"翻"的感覺。CSS 這邊就配合 li 裡面的連結而加上不同的背景圖片；

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

#hmenu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#hmenu li {
	float: left;
	padding: 0 5px;
}
#hmenu li a {
	display: block;
	height: 16px; /* 圖片的高/2 */
	line-height: 16px;	/* ie suck */
	text-indent: -9999px;
}
#hmenu a.v1 {
	width:68px; /* 圖片的寬 */
	background:url(v1.gif) no-repeat 0 0;	
}
#hmenu a.v2 {
	width:67px; /* 圖片的寬 */
	background:url(v2.gif) no-repeat 0 0;	
}	
#hmenu a.v3 {
	width:67px; /* 圖片的寬 */
	background:url(v3.gif) no-repeat 0 0;	
}
#hmenu a.v4 {
	width: 67px; /* 圖片的寬 */
	background:url(v4.gif) no-repeat 0 0;	
}

比較麻煩的是在 IE 6 中，若超連結沒設 line-height 的話，整個超連結的 height 會超出限制範圍，因此要記得加上 line-height 喔！

做到這邊就已經有個基本的雛型了，接下來就請出我們的 jQuery.animate 來做動畫效果囉：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(function(){
	// 幫 #hmenu li a 加上 hover 事件
	$("#hmenu li a").hover(function(){
		// 滑鼠移進選項時..
		// 把背景圖片的位置往上移動
		var _this = $(this),
			_height = _this.height() * -1;
		_this.stop().animate({
			backgroundPosition: "0px " + _height + "px"
		}, 200);
	}, function(){
		// 滑鼠移出選項時..
		// 把背景圖片的位置移回原位
		$(this).stop().animate({
			backgroundPosition: "0px 0px"
		}, 200);
	});
});

這邊用到的也是很基本的 animate 而已，只是記得要引用 Background-Position Animation Plugin 才行喔。

最後我們就能來看效果哩，試著把滑鼠移到選項上面看看：

jquery-flipping-menu-1

我們的選項就會往上翻轉吧，若是要往下翻轉的話，那麼就要改一開始的 background-position 及移動的位置就可以了。這題目就當成是作業讓各位自行去練習吧！

現在除了上下翻轉之外，筆者再弄個左右翻轉的範例，因為是左右的關係，所以圖片就要變化一下樣式：

h3

當然 CSS 及 jQuery 也需要配合修改一下，整個範例語法為：

檢視原始碼 JavaScript
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<style type="text/css">
	#vmenu {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#vmenu li {
		padding: 5px 0;
	}
	#vmenu li a {
		display: block;
		height: 18px; /* 圖片的高 */
		line-height: 18px;	/* ie suck */
		text-indent: -9999px;
	}
	#vmenu a.h1 {
		width:40px; /* 圖片的寬/2 */
		background:url(h1.gif) no-repeat 0 0;	
	}
	#vmenu a.h2 {
		width:58px; /* 圖片的寬/2 */
		background:url(h2.gif) no-repeat 0 0;	
	}	
	#vmenu a.h3 {
		width:58px; /* 圖片的寬/2 */
		background:url(h3.gif) no-repeat 0 0;	
	}
	#vmenu a.h4 {
		width:82px; /* 圖片的寬/2 */
		background:url(h4.gif) no-repeat 0 0;	
	}
</style>
<script type="text/javascript">
	$(function(){
		// 幫 #hmenu li a 加上 hover 事件
		$("#vmenu li a").hover(function(){
			// 滑鼠移進選項時..
			// 把背景圖片的位置往左移動
			var _this = $(this),
				_width = _this.width() * -1;
			_this.stop().animate({
				backgroundPosition: _width + "px 0"
			}, 200);
		}, function(){
			// 滑鼠移出選項時..
			// 把背景圖片的位置移回原位
			$(this).stop().animate({
				backgroundPosition: "0 0"
			}, 200);
		});
	});
</script>
 
<body>
	<h3>垂直選單(圖片是水平)</h3>
	<ul id="vmenu">
		<li><a href="#" class="h1">男丁</a></li>
		<li><a href="#" class="h2">jQuery</a></li>
		<li><a href="#" class="h3">小神童</a></li>
		<li><a href="#" class="h4">蠟筆小新</a></li>
	</ul>
</body>

瀏覽後的效果就是改成水平的翻轉：

jquery-flipping-menu-2

這樣的選單效果是不是很有趣呢？！如果再將選單做整體設計的話，那效果並不會比 Flash 差到那唷。

範例 1 範例 2 範例 3 範例 4 範例 5

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

31 筆針對 [jQ]用 jQuery 做選單 – 翻選式選單 的迴響

1 2

  2. 男丁老師，不好意思，打擾您了，我有問題想請教老師，老師您的翻選式選單，我將圖片換成png透明的時候，在加上pngFix.pack.js這支支援ie6透明度呈現的檔案，結果在ie6執行就無法做翻動的動作，這是哪裡出了問題~~謝謝

      • 男丁老師:

        使用第五個範例時，原本加在 href 內的連結變成沒效了，而且selected 的效果會永遠停留，直至再按一次再消失。
        同時，selected 的效果不是exclusive而是可以全部都變成 selected。
        可否做到同一時間只可有一個selected的效果?

        感謝!
        ivan

  5. 男丁大大~
    看了網站內的CSS選單的作法後覺得真的很受用~
    目前我想要做一個挺複雜的選單，不知男丁大大能否指導...m(_ _)m
    在網路上看到的選單作法，橫式的是橫式的、直式的是直式的...但如果想做橫式的+直式的那又該怎麼做呢TDT~
    我第一層的主選單是橫式的(如：男丁大大教的翻選式選單)、第二層的子選單也是橫式的(如：男丁大大教的水平雙層子選單)、第三層的子子選單是以直式的方式呈現...該怎麼做才好呢...我做了好久但第三層DIV的位置卻喬不定...第三層的直式選單不會乖乖出現在第二層橫式選單的正下方...我好困擾....T^T

    • 要不要到討論區發篇問題討論..順便把目前你弄出來的程式碼一起貼出來
      這樣好讓大家一起幫你找問題

    • 你可以先自訂一個 css 來指定你要預設的那個為翻轉。
      或是以第一個範例為例多加這段

      檢視原始碼 JavaScript
      1
2

      // 0 表示第一個
$("#hmenu li a").eq(0).css('backgroundPosition', '0px -16px');

  9. 請問大大若是我要把他放到一個定點這樣我程式碼要怎麼寫才好?
    (我有嚐試使用ap div包覆再用ccs:position:relative;position:absolute; 但是還是沒辦法放到我想放的位置)

    • 這應該只是基本的 css 問題, 要先看你 html, 然後才能知道你想放的位置要怎樣寫
      跟整個範例沒什麼關係哩~

  10. 回Bomb一點意見:

    用style就可以把想要的預設翻轉了,
    但是想在不碰到它就讓它轉回去的話,
    記得另外寫一個function在其他圖片有動作的時候重置

1 2

發表迴響