男丁格爾'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 下一頁 »

阿瓜於 2011-06-10 11:10:50 說：

男丁大大您好:
小弟不才有幾個問題想麻煩您幫忙解惑
小弟使用您提供的JQ選單來操作 CSS屬性原放在本文當中可以操作
但當小弟將CSS提出至第二層package的時候如./css/xxx.css
JQ效果就會失效敢請問男丁大大其中的問題何在呢?QQ
(如果提到第一層 IE6可以正常顯示但火狐無法正常顯示)

登入後再回覆
- 男丁格爾於 2011-06-13 12:28:54 說：
  
  這...可能要有實際的範例檔案才能找出問題哩XD
  
  登入後再回覆
噎噎於 2011-06-29 14:03:11 說：

大大~如何能夠用CSS完整控制選單顏色呢?也就是說，不在JS裡面調整顏色碼?

登入後再回覆
- 男丁格爾於 2011-07-07 08:39:52 說：
  
  你可以先設好一個 .class, 然後當滑鼠移入移出時利用 .toggleClass() 的方式去做切換
  
  登入後再回覆
噎噎於 2011-06-29 15:02:28 說：

大大再問一個問題，為何#menu 的margin調成auto 底色為不見，一定要用float才會出現黑色底

登入後再回覆
- 男丁格爾於 2011-07-07 08:43:48 說：
  
  如果你不在 ul 中用 float 的方式, 那麼你得在 li 中設定背景才有用
  
  登入後再回覆
Ryan 於 2011-07-07 13:38:32 說：

Dear, 男丁

想請教一下
你這個Menu超好看的，我想拿來用
但是想請教你一下
該如何把這個Menu在頁面置中呢?(非文字部份)

Best Regards,

登入後再回覆
- 男丁格爾於 2011-07-12 09:21:52 說：
  
  區塊包起來之後, 基本上設定 margin: 0 auto; 就可以置中了
  
  登入後再回覆
susu 於 2011-07-19 10:31:22 說：

你好想請問您一下我參考範例4 把自己做得圖片放進去後發現當我選擇第一個母選單時候會變顏色這是後在選其他母選單發現第一個選到的顏色不會變回原本的不知道該怎處理ˊˋ 謝謝

$(function(){
// 幫 #menu li 加上 hover 事件
$('#menu>li').hover(function(){
// 先找到 li 中的子選單
var _this = $(this),
_subnav = _this.children('ul');

// 變更目前母選項的背景顏色
// 同時滑入子選單(如果有的話)

_this.css('background-image','url(../image/newchoosetop.gif)');
_subnav.stop(true, true).slideDown(400);
} , function(){
// 變更目前母選項的背景顏色
// 同時滑出子選單(如果有的話)
// 也可以把整句拆成上面的寫法
$(this).css('backgroundColor', ").children('ul').stop(true, true).slideUp(400);
});

// 取消超連結的虛線框
$('a').focus(function(){
this.blur();
});
});

登入後再回覆
- 男丁格爾於 2011-07-20 16:08:04 說：
  
  你移上去是改background-image, 移出應該也是要清掉background-image吧
  
  登入後再回覆
jill 於 2011-08-25 22:36:50 說：

您好,請問第二層內文可以改置中嗎?因為我測試好像只能在右邊或左邊,沒有辦法置中
#menu li ul li { border-right: 1px solid #fff; float: right; }
有什麼方式可以置中,我到處找範例也都靠左邊

登入後再回覆
- 男丁格爾於 2011-09-02 21:04:54 說：
  
  只能用個詭異的方式, 求出選單的寬減到子選單的寬後, 把第一個 li 的寬度加到為剛剛剩餘的寬的一半, 然後文字靠右就可以了
  
  登入後再回覆
jill 於 2011-09-06 13:33:19 說：

您好,不好意思我不太懂意思如果我的寬是900子選單700,li要怎麼加直接對它設寬度嗎?那有好幾個選項每個都需要另外算它才會置中?

登入後再回覆
- 男丁格爾於 2011-09-20 08:31:32 說：
  
  計算的部份只要交給程式來算就可以了。
  
  登入後再回覆
saccharine 於 2011-09-07 11:13:55 說：

您好，請問一下，
想讓母選單背景變色外，文字也變色，我是這樣寫..
_this.css({background: "#000" , color:"white"});

但是文字還是沒變色耶＠＠　請問是哪邊出錯嗎？

所以程式碼都跟您的一樣，只有把
_this.css('backgroundColor', '#000');
改成上面那行而已

登入後再回覆
- 男丁格爾於 2011-09-20 08:34:01 說：
  
  你可以參考第一頁的網友 derek 的回覆。
  
  登入後再回覆
ctkai220 於 2011-09-18 16:26:59 說：

請問如果子選單是垂直的方式呈現要修改什麼地方

登入後再回覆
- 男丁格爾於 2011-09-20 09:15:16 說：
  
  抱歉，目前的 html 及 css 都不是針對垂直的方式來設計的。
  
  登入後再回覆
Ozzy Kuo 於 2011-12-17 07:12:06 說：

你好

想要想要請教一個問題

我想要改變的是字體呢？

我想要把背景的特效全部改成字體的特效

概要怎麼做？

登入後再回覆
- 男丁格爾於 2011-12-17 12:36:20 說：
  
  改字體就是設定 font-family 就可以。
  
  登入後再回覆
  - cello0418 於 2011-12-17 19:36:48 說：
    
    我的意思是要改變文字變色，效果想要和背景一樣，可以改變
    
    登入後再回覆
    - cello0418 於 2011-12-17 19:45:36 說：
      
      就是將_this.find('a').css('color', ' 顏色 ' );加入
      
      當滑鼠移入後，再移出就不會變回原來的顏色，全部都會變成移入所設定的顏色。
      
      登入後再回覆
      - 男丁格爾於 2011-12-19 00:04:23 說：
        
        你有在滑鼠移出時做動作嗎?前篇回應時就提醒你加個 .mouseout() 的動作哩!