Home » jQuery 應用

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

範例 1
範例 2
沒錯!只要 1,200 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

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

htcmenu_1

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

我們一樣先看 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 的部份:

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);
});

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

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

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

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

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

範例 1 範例 2 範例 3

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

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

  1. 謝謝老師,我使用原檔測也OK,我知道問題出現在那了@@
    我只是把選單下方那排黑色拿掉後在Google下就無法使用(但IE正常)

  2. 老師您好
    我想將HTC選單與lightbox做結合
    可是開啟lightbox的圖片時
    HTC選單會顯示在lightbox上方
    請問要怎樣改在下方呢?
    範例:http://cid-3a078afd3bc4ed0f.office.live.com/self.aspx/.Documents/test.rar
    ※lightbox在平面設計選單下

    • 你可以先把 #menuMask 及 .bhr 的 z-index 調小一點後試看看。
      例如 #menuMask 的 z-index 設為 50, .bhr 的設成 20

  3. 請問板大圖片預載的功能是要放在
    // 圖片預載
    _menu.each(function(){
    $(").attr('src', $(this).attr('id')+'_black.png').hide().appendTo('body');
    });
    的那個位子...試好久都沒成功><"
    我圖片放在images...

  4. 點選該按鈕,會跑去該頁!可是整個頁面會重新整理,按鈕會跑去"首頁"那選項(黑色),請問程式碼內要怎麼下?

發表迴響