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. 男丁版大,我用了
    var $j = jQuery.noConflict();
    然後將所有你script的$符號改成$j
    但效果沒有了,不知是那裏弄錯 ><

  2. 老師您好,如果我要把選單滑動的效果改成用 mouseover ,click 連結之後,可以出現下拉選單。需要改哪些地方呢?
    現在我是把 "_menu.click(function(){" 這一段改成 "_menu.mouseover(function(){"
    ,但是這樣會mouseover的地方就會直接連結,沒辦法再讓我 click

    • 因為原本我程式是在 click 時就把選單移到該選項後並連結到指定的網址..
      現在就算改成 mouseover 時也是會有連結的效果..
      所以你要把我範例程式的第40-44行的連結部份拿掉...把它寫在你的 click 事件中

  3. 老師您好,請教一下,如果連結我想要另開新視窗的話要如何修改呀(或者網頁多了一個內置框架,想讓連結顯示在框架內)

    • 不好意思..請把 htcmenu.js 中的第 41~43 行改用下面的程式:

      檢視原始碼 JavaScript
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      
      // 如果有網址
      if(!!_link){
      	// 如果有 target
      	var _target = _this.attr('target');
      	if(!!_target){
      		// target = '_blank' 則開新窗
      		if(_target.toLowerCase()=='_blank'){
      			open(_link);
      		}else{
      			// 連結開在指定的 target id 上
      			$('#'+_target).attr('src', _link);
      		}
      	}else{
      		location = _link;
      	}
      }
  4. 謝謝老師
    剛才測試了開新視窗OK了
    但如果是內框的話無法使用說
    a target="I1" href="html/Home.htm" id="Home">Hone</a
    他不會顯示在內框,而是另開一個新視窗

    老師在順便請教一個問題
    backgroundImage: 'url('+_this.attr("id")+'_black.png)
    如果我有建立了一個資料夾"jpg" 如果修改語法,當我點選時他會至資料夾載入圖片
    謝謝,以上二個問題請教

    • 你所謂的內框是指 iframe 嗎..?它的 id 是叫 I1 嗎?
      如果你選單圖片是放在資料夾中的話..那就是把

      檢視原始碼 JavaScript
      1
      
       'url('+_this.attr("id")+'_black.png)'

      改成

      檢視原始碼 JavaScript
      1
      
       'url(資料夾/'+_this.attr("id")+'_black.png)'
  5. 老師~抱歉我不太懂您說的意思
    原先就有這行了iframe name="I1" height="98%" width="98%" src="html/Home.htm"
    您的意思是把 iframe name="I1" 改為 iframe id="I1" 因為試了好像都沒有用

    • 仔細看剛剛回覆的的程式碼...
      你用到的是舊版的..不支援 iframe......如果替換最新的 code 之後..
      一樣是把 iframe 多加一個跟 name 同值的 id

      • 不知道同學這問題 解決沒 怕說有新人也發生這問題
        剛剛試過 是因為yahoo禁制iframe連結

        其實只要照老師一開始講的 在超連結那邊加上target='iframe id' 便可

發表迴響