Home » jQuery 應用

[jQ]用 jQuery 做選單 – 山寨版的 HTC 首頁選單

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

在開始介紹之前，請各位先到 HTC 網站看一下他們首頁長怎樣。

htcmenu_1

有沒有覺得 HTC 網站上方的 Flash 選單很有趣呢！這次筆者就是要教各位怎樣用 jQuery 做出一個山寨版的 HTC 首頁選單。

我們一樣先看 HTML 選單的部份：

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

<body>
	<ul id="menu">
		<li><a href="#" id="home">Home</a></li>
		<li><a href="#" id="abgne_tw">男丁</a></li>
		<li><a href="#" id="jellyyoyo">小神童</a></li>
		<li><a href="#" id="jquery">jQuery</a></li>
		<li><a href="#" id="flycan">飛肯</a></li>
	</ul>
	<div class="bhr"></div>
	<span id="menuMask"></span>
</body>

每一個連結都有各自的 id，這樣比較方便等下的 CSS 來使用它。接著就直接再來看 CSS 的部份：

檢視原始碼 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46

body {
	margin: 0;
	padding: 0;
}
#menu {
	float: right;
	margin: 50px 0 0;
	list-style: none;
}
#menu li {
	float: left;
}
#menu li a {
	display: block;
	width: 113px;
	height: 38px;
	text-indent: -9999px;
}
#home {
	background-image: url('home.png');
}
#abgne_tw {
	background-image: url('abgne_tw.png');
}
#jellyyoyo {
	background-image: url('jellyyoyo.png');
}
#jquery {
	background-image: url('jquery.png');
}
#flycan {
	background-image: url('flycan.png');
}
#menuMask {
	position: absolute;
	z-index: 10000;
	display: block;
	left: 0;
}
.bhr {
	clear: both;
	height: 15px;
	z-index: 200;
	margin: 0 auto;
	background-color: #000;
}

這邊要注意一下，為了方便等下程式的存取控制，因此筆者就把圖片的檔名設成跟連結的 id 一樣，然後遮罩用的黑色圖片也只是多加了個 _black 字樣而已。這邊雖然是把每個選單圖片都拆開來，但如果要改成一張大圖也是可以，只是要控制好 background-position 就好。

看一下圖片的寬高：

htcmenu_2

因為我們的遮罩比一般的大上一點，因此等一下程式中要做一點微調的設定，這樣才不會看起來怪怪的。若沒問題的話，就來看 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

// 避免無法正確取得選單圖片的寬高
// 因此動作延遲到 window.onload
$(window).load(function(){
	// 先取得選單的連結及找出 .selected 的選項
	// 再取得用來當遮罩的 #menuMask
	// 因為遮罩圖片比原來選單圖片大，所以設定要顯示的寬高及位置差距
	var _menu = $('#menu li>a'),
		_target = $(_menu).filter('.selected'),
		_menuMask = $('#menuMask'),
		_maskHeight = 10,
		_diffHeight = 8,
		_maskWidth = 5,
		_diffWidth = 5;
 
	// 如果沒有 .selected 的選項就預設第一個
	if(_target.length<=0){
		_target = $(_menu).eq(0);
	}
 
	// 圖片預載
	_menu.each(function(){
		$('<img />').attr('src', $(this).attr('id')+'_black.png').hide().appendTo('body');
	});
 
	// 當選單被點擊時..
	_menu.click(function(){
		// 先移除上一個有 .selected 的超連結
		$('.selected').removeClass('selected');
 
		// 把點擊到的項目加上 .selected
		var _this = $(this).addClass('selected'),
			_link = _this.attr('href');
 
		// 更換選單的背景圖片及移動選單到該選項上
		// 如果選項有連結時，則會在動畫移動完後來轉址
		_menuMask.css({
			backgroundImage: 'url('+_this.attr('id')+'_black.png)'
		}).stop().animate({
			width: $(this).width() + _maskWidth,
			height: $(this).height() + _maskHeight,
			top: $(this).offset().top - _diffHeight,
			left: $(this).offset().left - _diffWidth
		}, function(){
			// 如果有網址
			if(!!_link){
				// 如果有 target
				var _targetAttr = _this.attr('target');
				if(!!_targetAttr){
					// target = '_blank' 則開新窗
					if(_targetAttr.toLowerCase()=='_blank'){
						open(_link);
					}else{
						// 連結開在指定的 target id 上
						$('#'+_targetAttr).attr('src', _link);
					}
				}else{
					location = _link;
				}
			}
		});
 
		return false;
	}).focus(function(){
		$(this).blur();	
	});
 
	// 當瀏覽器尺寸改變時也要重新移動位置
	$(window).resize(function () {
		moveMenu($(_menu).filter('.selected'));
	});
 
	// 移動遮罩到指定的選項上面
	function moveMenu(obj){
		_menuMask.css({
			width: obj.width() + _maskWidth,
			height: obj.height() + _maskHeight,
			top: obj.offset().top - _diffHeight,
			left: obj.offset().left - _diffWidth,
			backgroundImage: 'url('+obj.attr('id')+'_black.png)'
		});
	}
 
	// 網頁載入後先移動遮罩
	moveMenu(_target);
});

一開始網頁載入後，如果連結有 .selected 的 className 時，則會把遮罩移到該選項上；反之若都沒有時，則把它移到第一個選項上面。因此，各位若有多個頁面時，就要一一的設定一下這樣的 .selected，不然就是要變更一下程式的判斷才行。

到這邊就完成整個山寨選單的製作了，讓我們看一下畫面及效果吧：
htcmenu_3

是不是給它有 9 成以上的相似度了呢！再特別說明一點，HTC 網站的 Flash 選單是當使用者點某一選項時，遮罩內容會馬上就變更，然後會移動到所點選的選項上面後再啟動連結的效果。因此筆者也把這功能加到我們的範例中，所以仔細注意一下整個移動的動作唷！

有上過 jQuery 課程的同學可以對照一下講義範例 5-13，做法及原理是一樣的！

更新：
2009-09-17
加入圖片預載功能
2010-01-18
加入連結開啟新窗及指定在 iframe

範例 1 範例 2 範例 3

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

76 筆針對 [jQ]用 jQuery 做選單 – 山寨版的 HTC 首頁選單 的迴響

1 2 3 4 5

  3. 所謂用div區塊作隱藏顯示
    是用dw內的行為視窗做的嗎???
    可是如果是的話
    可以跟本範例 的程式語法一起使用嗎??
    因為行為內的顯示隱藏功能 不是要先選擇一個框或是文字
    當click時顯示或隱藏某個div
    請問我這樣是正確的嗎

    • 你應該可以試著做一個簡單的超連結及 iframe, 然後先試著能點超連結後讓 iframe 連到你指定的網址。

  6. 我想要做的是
    當滑鼠滑過有mouseover的效果遮罩會移動
    當click遮罩的黑色部分時可以有連結效果
    當連結時我想要做的是
    連結到同頁下方div區域(而這個div區域裡面還會有iframe 可以不用換頁面就能瀏覽很多東西)
    最大的困惑點就是 這個htc範例連結時使用語法去指定目標
    可是照我這樣做的話下方需要連結的div區域就會跟我按鈕一樣多
    而程式碼 所規範的是連結到一個目標
    因為我不太會改 所以....
    不知道可不可行

  7. 可以用load這個函數去代出想要連結的網址
    看過解說我大概知道用途
    可是如果要應用在各個例子中我就不知道該如何去刪減使用了0.0
    我該怎辦呢??

    • 大概在以下註解的部份的圖片位置要改一下

      檢視原始碼 JavaScript
      1
2
3

      // 圖片預載
// 更換選單的背景圖片及移動選單到該選項上
// 移動遮罩到指定的選項上面

  10. 請問，當我替每個按鈕加上連結後，它會自動跑回預設的第一個耶。

    我應該要怎麼讓 遮罩 停留在原本點選的那一個按鈕上呢???

1 2 3 4 5

發表迴響