Home » jQuery 應用

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

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

  1. 男丁版大：
    我利用了這個效果修改了一下
    但能做下拉選單嗎?
    還有我找不到男丁版大的MAIL
    幫便寄給男丁版大幫我看嗎?

  3. 老師您好：
    我套用這個案例並將網頁利用頁框分成top / main / bottm 三部分
    此案例選單我置於top
    但我將選單選項設定連結並想讓它顯示於main
    一直無法成功
    不知是我哪邊設定錯誤呢?
    謝謝您

  4. 男丁版大你好:

    請問我套用範例，但現在遇到一個問題
    連結部分，應該版大連結到iframe上，但如果改成frame，要怎麼使用

    與樓上問題有類似，想讓它顯示在main裡

    例:
    切網頁

    ——————————————————————
    範例
    上面是在up.jsp，我想讓它顯示在middle裡，要如何使用請版大題是想法，謝謝

  5. 老師,
    請問當載入頁面尚未點選時改變視窗大小，這時候圖片位置會跑到，請問如何解決?
    另外想請問關於
    // 圖片預載
    _menu.each(function(){
    $(").attr('src', $(this).attr('id')+'_on.gif').hide().appendTo('body');
    });

    因為我不太了解如果我把圖片放在images資料夾裡，應該如何調整這段碼?

    再麻煩了><

1 2 3 4 5

發表迴響