男丁格爾's 脫殼玩

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

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

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

<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 把選單排成水平樣式，並把子選單先隱藏起來：

檢視原始碼 CSS

#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

$(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

$(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 2 3 4 5 6 7 8 下一頁 »

stormbreaker 於 2012-01-19 11:22:33 說：

老師,我試過滑入用slideDown 滑出用fadeOut 這樣挺有FU的!

登入後再回覆
- 男丁格爾於 2012-01-20 09:26:18 說：
  
  光是想像就覺得不錯哩!!
  
  登入後再回覆
vicky1023 於 2012-02-09 10:50:56 說：

請問男丁大大，我想用成這樣子，第二層寬度高度隨裡面放置內容改變，那要怎麼改?
http://apexi-usa.com/

登入後再回覆
- 男丁格爾於 2012-02-16 14:29:43 說：
  
  該網站的效果跟這範例不一樣, 它的子選單應該只是一個 div 之類的區塊, 然後其中放了很多項目而已。
  
  登入後再回覆
Jerry 於 2012-03-29 07:21:28 說：

請教一下，
如果是垂直的話，
滑鼠移到主選單，則子選單往右跳出，
子選單與主選單的 display 就是 inline 嗎?

登入後再回覆
- 男丁格爾於 2012-03-30 09:03:33 說：
  
  沒特別試過, 不過畢竟只要先能用 CSS 排出來, 接下來寫程式就簡單多了!
  
  登入後再回覆
公仔於 2012-03-29 10:08:36 說：

老師請問一下有沒有可能實現，滑鼠移開後選單顏色還是持續?

登入後再回覆
- 男丁格爾於 2012-03-30 08:48:57 說：
  
  可以啊, 不過這樣滑鼠離開後只有母選單會變色~
  我補在範例 6 了~
  
  登入後再回覆
  - 公仔於 2012-04-02 15:19:55 說：
    
    老師~再請問一下有沒有可能連子選單一起變色呢
    
    登入後再回覆
    - 公仔於 2012-04-03 14:46:30 說：
      
      老師我可不可以把我的檔案寄給你，請您幫看我的問題呢?
      
      登入後再回覆
      - 男丁格爾於 2012-04-16 17:56:23 說：
        
        可以直接寄給我看看~
      - 公仔於 2012-05-02 13:38:16 說：
        
        老師直接MAIL到您的信箱不知可以嗎?
        請問信箱!
      - 男丁格爾於 2012-05-02 20:48:33 說：
        
        信箱就是網址@gmail.com
vicky1023 於 2012-04-30 15:06:20 說：

請問男丁大大，子選單出現會覆蓋下面圖或字，有無辦法可以讓子選單出現時，圖或字往下移;子選單消失時，圖和字又回復原來位置??

登入後再回覆
- 男丁格爾於 2012-05-02 20:58:22 說：
  
  以現在範例套用的效果來說是不行的, 要的話, 得要修改整個配置方式~
  
  登入後再回覆
貓貓於 2012-07-01 00:14:43 說：

你好啊! 你的教學真的酷呆了~ >W<
想問這個code能改一下令子選單(彈出來的選項)
變到打直向下拉嗎? .<"

登入後再回覆
- 男丁格爾於 2012-07-05 13:47:11 說：
  
  你可以試著套過修改 css 來讓 #menu li ul li 不要浮動!
  
  登入後再回覆
Terry 於 2012-09-17 16:13:50 說：

想請教一下, 可否循環滖動, 而不是每次由頭開以, 謝

登入後再回覆
- 男丁格爾於 2012-11-17 23:21:43 說：
  
  你的循環的意思是什麼?
  
  登入後再回覆
vicky1023 於 2012-09-20 14:48:22 說：

請問大大
我若第一層就要下滑(slideDown)，那我該如何做??

登入後再回覆
- vicky1023 於 2012-09-20 14:50:13 說：
  
  是加在_this.css('backgroundColor', ");嗎?
  
  // 變更目前母選項的背景顏色
  // 同時顯示子選單(如果有的話)
  _this.css('backgroundColor', ");
  _subnav.stop(true, true).slideDown(400);
  }).eq(_open).mouseover();
  
  登入後再回覆
  - 男丁格爾於 2012-11-17 23:21:05 說：
    
    什麼是第一層就要下滑?
    
    登入後再回覆
victor 於 2012-10-02 17:20:59 說：

男丁老師您好,看了您的範例確實是受用不少,不過我看您都是利用ul和li來做,請問如果使用td加img圖片是否也能夠做到相同的效果?謝謝

登入後再回覆
- 男丁格爾於 2012-11-17 22:13:59 說：
  
  table 的結構很難做出一些動畫效果出來..
  
  登入後再回覆
Nell 於 2012-10-27 11:43:29 說：

男丁格主:我有試著依照你的.hover改成click的方法改,但可能是我不知道要加在哪個位置所以失敗囉ˊˋ,
希望男丁格主可以在講解一次~
麻煩你了!

登入後再回覆
- 男丁格爾於 2012-11-16 22:32:03 說：
  
  基本上就是把 hover 這字換成 click, 然後另一個 function 就拿掉它..
  but...原本第二個 function 中要做的事就要移到第一個中才行~
  你先試看看, 若有問題再把你改過的程式也貼上來看看
  
  登入後再回覆