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

作者：男丁格爾 | 日期：2009-12-31 | 分類：jQuery 應用 | 瀏覽：3,926 | 留言：30

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

一樣是用 ul 及 li 來當母子選單的項目：

?檢視原始碼 HTML
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>
	</ul>
</body>

子選單可放在第一層 li 的裡面，若沒有子項目的話就單獨就好。接著再用 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

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

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

範例瀏覽：
http://demonstration.abgne.tw/jquery/0015/0015_1.html
http://demonstration.abgne.tw/jquery/0015/0015_2.html
http://demonstration.abgne.tw/jquery/0015/0015_3.html
http://demonstration.abgne.tw/jquery/0015/0015_4.html
http://demonstration.abgne.tw/jquery/0015/0015_5.html

相關連結
推薦內容
標籤：, , , , , ,
發表留言

如果有任何 jQuery 問題也可以直接到 討論區 中發文討論。
  1. ironman
    2010-01-02 16:49:31 回覆

    請問男大
    有垂直的範例嗎
    謝謝


    • 男丁格爾
      男丁格爾
      2010-01-03 13:08:05 回覆

      你需要的是母選單也是垂直的嗎..?


  2. ironman
    2010-01-04 11:06:38 回覆

    是阿
    如果有的話
    真是太感謝了
    Happy new year！


    • 男丁格爾
      男丁格爾
      2010-01-05 08:06:12 回覆

      再找時間來整理...最近忙了點


  3. nieco
    2010-01-15 13:18:27 回覆

    男丁高手您好:

    我是網頁設計自學的初學者
    最近用到javascript或是flash寫的網頁
    寄給其他人看的時候開啟會有安全性問題(ActiveX允許視窗)
    覺得這種東西不是每個人都會裝
    要是因為安全性擋掉
    版面會跑掉

    想請問您
    如果是為了普及性的話(年齡層很大)的網頁
    是不是會避免用javascript或是flash呢
    (困擾中...)

    如果有其他推薦書籍或是css網頁撰寫精進方法
    有方便的話能不能提供呢
    (感激)謝謝


    • 男丁格爾
      男丁格爾
      2010-01-15 21:58:51 回覆

      因為你檔案是本機的關係~所以 IE 才會出現安全性的問題..
      若是把檔案放網路上或是改用非 IE 瀏覽器來開啟則不會有這樣的問題

      CSS等知識除了可多參考別人的作品之外...其它還是要靠經驗的累積


  4. 如娃
    2010-03-02 18:02:25 回覆

    男丁高手您好：
    　　想請問一下：水平雙層子選單隱藏的部份是否可以放入影片檔（.swf），當子選單打開時，影片檔就被蓋過，類似Yahoo首頁右邊「信箱」、「知識+」、「拍賣」那塊的效果一樣，我試了一下，但影片檔會蓋住子選單，不知應該改那一個程式才對，請指教！
    　　謝謝！


    • 男丁格爾
      男丁格爾
      2010-03-03 13:18:26 回覆

      把 swf 的屬性多加一個 wmode 為 transparent 就可以了


  5. 如娃
    2010-03-03 16:35:06 回覆

    男丁高手您好：
    　　更改過後，成功了！
    　　真是太感謝您了！多謝指教！


  6. 如娃
    2010-03-03 17:14:04 回覆

    男丁高手您好：
    　　我在您發表「頁籤-動態改變CSS樣式」裡，有兩個問題，因為在頁籤裡沒有可以留言，所以留在這裡，造成不便，請見諒！
    　　第一個問題：頁籤在同一個HTML裡可否放兩組甚至三組？程式該改那裡？
    　　問題說明：類似Yahoo裡的「焦點新聞」、「今日焦點」、「精選推薦」三組頁籤，每組五個不同的標籤主題及標籤內容。

    　　第二個問題：滑鼠移到某一個頁籤上時，可否自動顯示其內容？程式該如何寫？
    　　問題說明：類似Yahoo裡的「焦點新聞」、「運動」、「娛樂」、「新奇」、「話題」這五個標籤主題，滑鼠移到標籤主題上時，會自動顯示標籤內容。

    　　我有改過，但兩組頁籤在同一個HTML裡(上下)時，點下方的頁籤，結果是上方的頁籤會動，下方的頁籤完全沒反應，不知應該改那裡才對？（研究了很久，依然不會動！很困擾），如果能夠解決就太好了，請高手指教！
    　　　　
    　　　　　謝謝高手！


    • 男丁格爾
      男丁格爾
      2010-03-03 17:30:27 回覆

      那篇是很久前的內容了，現在用 jQuery 來做會更簡單及方便。
      1.要有幾組都不會是問題..但如果你是用 id 來控制的話..記得 id 是唯一不能重覆的。
      2.把 click 的方式改成用 mouseover 即可

      你說有兩組卻都是第一組動的話..應該是 id 都是重覆的吧!!


  7. 如娃
    2010-03-03 17:47:10 回覆

    男丁高手：
    　　怎麼做可以有範例給我看嗎?
    　　感謝！


    • 男丁格爾
      男丁格爾
      2010-03-04 09:54:18 回覆

      這幾天有空再改用 jQuery 寫一個簡單的範例!!


  8. 如娃
    2010-03-04 11:47:09 回覆

    男丁高手：
    　　在這裡先謝謝您囉！
    　　寫好後會發佈在那裡呢？我會不定時上來看看的，謝囉！


    • 男丁格爾
      男丁格爾
      2010-03-04 11:52:05 回覆

      寫好會發佈在這邊的...
      另外...男丁就男丁..不用加高手兩字..XD


  9. ihaw
    2010-03-31 13:15:05 回覆

    您好：
    請問，如果當網頁開啟，預先顯示jQuery的子選單，當點其他項目，滑鼠移開該項目不要讓子選單隱藏，請問大大要如何修改???謝謝


  10. emarkemark
    2010-05-20 17:07:32 回覆

    請問能否預設開啟指定顯示jQuery的子選單，滑鼠移開該項目不要讓子選單隱藏之外，能否做到滑鼠移開整個選單後可以自動回到預設開啟的項目? (譬如說 http://demonstration.abgne.tw/jquery/0015/0015_4.html 預設開啟"其他網站"，滑鼠可以左右感應顯示不同子選單之外，滑鼠移開後會回到預設開啟的"其他網站")


    • 男丁格爾
      男丁格爾
      2010-05-20 17:20:27 回覆

      你可以把 hover()..中關於 mouseout 的部份改成離開時就顯示你要預設的就可以了。


  11. shumi
    2010-07-08 11:04:11 回覆

    請問一下 範例4
    我想要 當滑鼠移開的時候 會回到當初設定的原本 預設顯示選項 上
    該如何做呢?


  12. shumi
    2010-07-08 23:10:42 回覆

    感謝男丁大大


  13. VH
    2010-07-27 14:35:31 回覆

    版主~
    在製作網頁時，選單下方已設定有個jquery 廣告輪播的版位（如htc或apple首頁大篇幅廣告），但是下拉式選單卻被遮住了，請教有何方式可解決?

    謝謝
    VH


    • 男丁格爾
      男丁格爾
      2010-07-27 14:38:29 回覆

      可以試著用用 bgiframe
      或是把 swf 的 wmode 設為 transparent 後試試


  14. 歐迪
    2010-07-27 15:46:40 回覆

    您好！我想請問一下，要如何更改高度？！


    • 男丁格爾
      男丁格爾
      2010-07-27 15:51:08 回覆

      看你要改那邊的高度..基本上可以在 #menu li a 或 #menu li ul li 中設定


  15. moon
    2010-08-08 17:33:25 回覆

    請問子選單可以改成像http://www.vmware.com/子選單左邊白色色塊這種嗎?有沒有類似的範例可以參考呢?


    • 男丁格爾
      男丁格爾
      2010-08-08 19:42:31 回覆

      你需要修改 css 才行..


  16. moon
    2010-08-10 17:58:10 回覆

    做出來了，謝謝^^


    • 男丁格爾
      男丁格爾
      2010-08-12 09:23:19 回覆

      很歡迎到討論區發文分享心得喔！