Home » jQuery 應用

[jQ]用 jQuery 做選單 – 彩色動態伸縮子選單

[ 日期： | 瀏覽：97,059 | 迴響：38 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 1,600 元)
沒錯!只要 1,600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

昨天下午有同學問了一個很有趣的選單效果，它的子母選單都是水平式排列，當滑鼠移到母選單時，才會展開子選單。其中最有趣的是子選單的背景顏色會隨著母選單的第一字的顏色而改變，所以筆者就花點時間來實作出來跟大家分享一下。

檢視原始碼 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
28
29
30
31
32
33
34
35
36
37

<body>
	<div id="menu-wrapper">
		<div class="main-menu-wrapper">
			<div class="main-menu">
				<ul>
					<li class="m1"><a href="#"><span>j</span>Query</a></li>
					<li class="m2"><a href="#"><span>A</span>ndroid</a></li>
					<li class="m3"><a href="#"><span>W</span>ordPress</a></li>
					<li class="m4"><a href="#"><span>O</span>penCart</a></li>
				</ul>
			</div>
		</div>
		<div class="sub-menu-wrapper">
			<div class="sub-menu">
				<ul class="sub-memu-0">
					<li><a href="#">jQuery 應用</a></li>
					<li><a href="#">jQuery 外掛</a></li>
					<li><a href="#">jQuery 技巧</a></li>
					<li><a href="#">jQuery 資源</a></li>
				</ul>
				<ul class="sub-memu-1">
					<li><a href="#">Android 程式片段</a></li>
					<li><a href="#">推薦 APP</a></li>
					<li><a href="#">新機介紹</a></li>
				</ul>
				<ul class="sub-memu-2">
					<li><a href="#">WP 外掛</a></li>
					<li><a href="#">WP 技巧</a></li>
				</ul>
				<ul class="sub-memu-3">
					<li><a href="#">OP 外掛</a></li>
					<li><a href="#">OP 主題</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>

.main-menu 主要是母選單，而 .sub-memu-0 就是相對應的子選單。那為什麼要用一堆區塊包起來呢？快先來看 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
47
48
49
50
51
52

body {
	margin: 0;
}
#menu-wrapper .main-menu , #menu-wrapper .sub-menu {
	margin: 0 auto;
	width: 980px;
}
#menu-wrapper ul, #menu-wrapper ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-menu ul li, .sub-menu ul li {
	float: left;
}
.main-menu ul li a {
	color: #000;
	display: block;
	margin-right: 50px;
	padding: 5px 5px 5px 0;
	text-decoration: none;
}
.sub-menu-wrapper {
	height: 28px;
	clear: left;
	background-color: #f90;
	border-top: 5px solid #f90;	/* 預設使用跟 .c1 一樣的顏色 */
}
.sub-menu {
	height: 28px;
	position: relative;
	overflow: hidden;
}
.sub-menu ul {
	position: absolute;
}
.sub-menu ul li a {
	color: #fff;
	display: block;
	margin-right: 20px;
	padding-top: 2px;
	text-decoration: none;
}
/* 自訂子選單的位置 */
.sub-menu .sub-memu-1 { left: 50px; }
.sub-menu .sub-memu-2 { left: 170px; }
.sub-menu .sub-memu-3 { left: 265px; }
/* 自訂每一個選單的顏色 */
.main-menu ul li.m1 span, .main-menu ul li.m1 a.selected { color: #f90; }
.main-menu ul li.m2 span, .main-menu ul li.m2 a.selected { color: #09c; }
.main-menu ul li.m3 span, .main-menu ul li.m3 a.selected { color: #3c0; }
.main-menu ul li.m4 span, .main-menu ul li.m4 a.selected { color: #f6f; }

CSS 並沒用到什麼特殊的語法，咱們就直接來看套上去後的效果吧~

雖然現在子選單們都疊在一起了，但這就是 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

$(function(){
	// 先取得相關選單元素及高度
	var $menuWrapper = $('#menu-wrapper'), 
		$subMenuWwrapper = $menuWrapper.find('.sub-menu-wrapper').add($menuWrapper.find('.sub-menu')), 
		_height = $subMenuWwrapper.height(), 
		_animateSpeed = 200;
 
	// 先把 $subMenuWwrapper 的高度歸 0
	// 並把 .sub-menu ul 先往上移動隱藏
	var $subMenu = $subMenuWwrapper.height(0).find('.sub-menu ul').css({
		top: _height * -1
	});
 
	// 當滑鼠移入到 .main-menu ul li a 上時
	$('.main-menu ul li a').mouseover(function(){
		// 先取出被滑鼠移入的選單
		// 並取得該選單中第一個 span 的文字顏色
		var $this = $(this), 
			$color = $this.find('span').css('color'), 
			_no = $this.parent().index();
 
		// 改變 $subMenuWwrapper 的顏色為 $color 並展開高度
		$subMenuWwrapper.css({
			backgroundColor: $color, 
			borderTopColor: $color
		}).stop().animate({
			height: _height
		}, _animateSpeed);
 
		// 移動相對應的子選單
		$subMenu.eq(_no).stop().animate({
			top: 0
		}, _animateSpeed).siblings().stop().animate({
			top: _height * -1
		}, _animateSpeed);
 
		// 讓被滑鼠移入的選單加上指定的效果
		$this.addClass('selected').parent().siblings().find('a.selected').removeClass('selected');
 
		return false;
	});
 
	// 當滑鼠移出 $menuWrapper 後把 $subMenuWwrapper 的高度歸 0
	$menuWrapper.mouseleave(function(){
		$subMenuWwrapper.stop().animate({
			height: 0
		}, _animateSpeed);
	});
});

把子選單藏起來或是顯示子選單的動作都由程式來控制，當滑鼠移到母選單時就會自動展開子選單囉~

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
顯示預設母選單 會員限定
判斷是否有子選單，若沒有時則不改變高度 會員限定

38 筆針對 [jQ]用 jQuery 做選單 – 彩色動態伸縮子選單 的迴響

1 2

  2. 老師您好，我很喜歡這個bar，但因目前內容不多，所以bar也不會做到子選單(只留下母選單)，於是我把....到

    不過現在我遇到問題，若我現在母選單有4個連結(a b c d)，其中b c d都有子選單，a沒有，於是我把刪掉，結果顯示變成 a b c是有子選單 但d是母選單而已。

    這個我該怎麼克服呢，謝謝

  4. 老師你好
    我是個新手 之前去看別的範例好像都有附js的版本
    這個範例好像沒有 可以提供js版本嗎

  5. 想請問~
    因為網頁開啟時他會先出現一秒再往上跑
    是否可以將他先設sub_menu先設display:none
    滑入時才出現呢?
    拜託教教我 急用>"<

    感謝

  7. 男丁老師你好
    我想請問下看到有些購物網站例如這家http://order.puree.com.tw/
    他的首頁的這個http://i.imgur.com/G0fH5Yl.png
    可以用jquery製作完成嗎(製作成類似的也行)
    可以發篇教學一下嗎

  8. 男丁老師你好~~我都有照這上面的語法去做
    但效果都顯示不出來，是哪裡出了問題，我是用Dreamweaver做的

  9. 老師您好，我想問一下老師下面這段語法中是否每個按鈕都是使用超連結，如果是的話可以幫忙挑出要放置超連結的地方嗎?再來是如果想在網頁最下方插入框架放置可伸縮的播放器(使用這個網站:http://www.pusacg.org/plugin.php?id=ruri_music)請問語法要怎麼寫?不好意思我只是個初學者很多東西都不太懂....

    jQuery 應用
    jQuery 外掛
    jQuery 技巧
    jQuery 資源

  10. 老師您好:
    我是剛剛註冊進來的會員
    很喜歡您這個"彩色動態伸縮子選單"
    因我是門外漢.只做過框架的html語法
    最近知道用frame框架語法已落伍
    所以找了好久找到了您這..好感動!
    不過我仍迷失在以前的frame框架語法中
    因為frame它很方便在選單框架那裡按下後可指定target開啟在另一個框架中...
    所以想請問您的"彩色動態伸縮子選單".要如何做才能指定?
    比如我是上下兩個區塊.上面區塊放"彩色動態伸縮子選單"
    下面區塊是主頁區..也是按下選單後要出現的地方.
    習作如下:
    上面區塊-預備放選單

    按上面的選單要在下面這個窗口開啟視窗

    以上.謝謝!

1 2

發表迴響