Home » jQuery 應用

[jQ]用 jQuery 做選單 – 水平雙層子選單

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

前天上課時有同學問到是否有水平雙層子選單的範例,所以筆者就把原有的舊範例稍微整理一下,現在要來跟各位分享這有趣的選單效果囉。

一樣是用 ulli 來當母子選單的項目:

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
<body>
	<ul id="menu">
		<li><a href="#">jQuery</a>
			<ul>
				<li><a href="#">應用範例</a></li>
				<li><a href="#">使用技巧</a></li>
				<li><a href="#">相關資源</a></li>
			</ul>
		</li>
		<li>
			<a href="#">CSS</a>
			<ul>
				<li><a href="#">CSS Hack</a></li>
				<li><a href="#">免費圖示</a></li>
			</ul>
		</li>
		<li><a href="#">其它網站</a>
			<ul>
				<li><a href="#">男丁格爾's 脫殼玩</a></li>
				<li><a href="#">Google</a></li>
				<li><a href="#">Yahoo!奇摩</a></li>
				<li><a href="#">原子小金剛</a></li>
			</ul>
		</li>
		<li><a href="#">新年快樂</a></li>
	</ul>
</body>

子選單可放在第一層 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
32
33
34
35
36
#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 500px;
	float: left;
	background: #000;
}
#menu li {
	margin: 0;
	padding: 0;
	float: left;
	border-right: 1px solid #999;
}
#menu li a {
	padding: 10px 15px;
	display: block;
	color: #fff;
	text-decoration: none;
}
#menu li ul {
	margin: 0;
	padding: 15px 0;
	list-style: none;
	float: left;
	position: absolute;
	left: 0;
	width: 500px;
	color: #fff;
	background: #06c url('bottom.gif') no-repeat bottom;
	display: none;
}
#menu li ul li { border-right: 1px solid #fff; }
#menu li ul li a { display: inline; }
#menu li ul li a:hover { text-decoration: underline; }

子選單的座標系統要設成 absolute,這樣才能讓它浮出整個選單。接著為了讓子選單美觀一點點,所以筆者在第二層 ul 中加入了有圓角效果的背景圖片

先來看經過 CSS 裝飾過後的效果:



若沒問題的話,就開始動手做最關鍵的程式部份:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
	// 幫 #menu li 加上 hover 事件
	$('#menu li').hover(function(){
		// 先找到 li 中的子選單
		var _this = $(this),
			_subnav = _this.children('ul');
 
		// 變更目前母選項的背景顏色
		// 同時顯示子選單(如果有的話)
		_this.css('backgroundColor', '#06c');
		_subnav.css('display', 'block');
	} , function(){
		// 變更目前母選項的背景顏色
		// 同時隱藏子選單(如果有的話)
		// 也可以把整句拆成上面的寫法
		$(this).css('backgroundColor', '').children('ul').css('display', 'none');
	});
 
	// 取消超連結的虛線框
	$('a').focus(function(){
		this.blur();
	});
});

其實因為已經都用 CSS 設計過了,程式這邊只是控制滑鼠移到母選項的時候的動作而已。當移到母選項時則顯示子選單;反之則隱藏起來。



這樣的選單效果是不是也很有意思呢?我們也可以在子選單顯示時加上一些動畫效果:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function(){
	// 幫 #menu li 加上 hover 事件
	$('#menu li').hover(function(){
		// 先找到 li 中的子選單
		var _this = $(this),
			_subnav = _this.children('ul');
 
		// 變更目前母選項的背景顏色
		// 同時淡入子選單(如果有的話)
		_this.css('backgroundColor', '#06c');
		_subnav.stop(true, true).fadeIn(400);
	} , function(){
		// 變更目前母選項的背景顏色
		// 同時淡出子選單(如果有的話)
		// 也可以把整句拆成上面的寫法
		$(this).css('backgroundColor', '').children('ul').stop(true, true).fadeOut(400);
	});
 
	// 取消超連結的虛線框
	$('a').focus(function(){
		this.blur();
	});
});

筆者使用了淡入淡出的效果來顯示/隱藏子選單,但有個小地方要注意一下,除了要先清除未完成的動畫效果之外;若動畫時間設太長的話,可能會在上一次的子選單未消失前,又讓使用者把滑鼠移上去而產生錯亂的情況喔。

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

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

157 筆針對 [jQ]用 jQuery 做選單 – 水平雙層子選單 的迴響

  1. 請問如何才可以弄到如http://designsensory.com/的效果,
    即是自動展示當前類別向更改轉換類別的時間?
    謝謝!!!

  2. 男丁老師,請教您個問題,如果當我的次選項超過寬度的範圍,例如:其他網站現在有4個選項,當我多了第5個,它會自動斷行對齊嗎?

  3. 恩恩,我解決箭頭的問題了!!謝謝
    不過我現在重新做一個網頁,但我把css是存在另一個檔案中!!就是新增css列表!
    一樣的程式貼上去但是無法顯示需要跳出來的選項!!
    請問可以麻煩你幫我看一下檔案嗎?
    我沒有把他傳到網路上去,方便寄給您嗎?
    謝謝...

  4. 男丁大大您好~

    我是初學者,想請問一下如果我想把選單部分換成自己設計的圖片,CSS部分我該從哪個部分去換呢?

    例如"新年快樂" 這個區塊換成圖片

    請大大指教 感謝><

  5. 請問如何可以將第二層選單設為長期顯示,
    如http://designsensory.com/似的,
    移去新的選項會改變為新的子選單,
    離開後點到最初預設的子選單,
    這個效果怎樣才可以達到?

發表迴響