Home » jQuery 應用

[jQ]用 jQuery 做選單 – 橫向 Accordion 式選單

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

常見的 Accordion 選單都是直向為主，這次筆者要教各位寫一個變形的橫向 Accordion 式選單，讓我們的選單硬是跟其它人不一樣。

廢話就不多寫了，直接來看 HTML：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13

<body>
	<div id="nav_container">
		<div class="navend"></div>
		<ul id="nav">
			<li><a href="http://abgne.tw" class="abgne">男丁格爾</a></li>
			<li><a href="#" class="jelly">小神童</a></li>
			<li><a href="#" class="jquery">jQuery</a></li>
			<li><a href="#" class="intro">簡介</a></li>
			<li><a href="#" class="about">關於</a></li>
			<li><a href="#" class="help">幫助</a></li>
		</ul>
	</div>
</body>

基本的選單一樣都是用 ul 來做，但要注意的是那個 div.navend 區塊，它是用來放置最右邊邊框圖片用的，如果缺少了它會讓選單看起來突然被截斷了(因為我們每一個選單都有邊框)。

再來就看看 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

#nav {
	position: relative;
	overflow: hidden;
	list-style: none;
	float: right;
	width: 480px;
	height: 30px;
	margin: 0;
	padding: 0;
}
.navend {
	float: right;
	background-image: url(end.gif);
	width: 5px; /* end.gif 的寬 */
	height: 30px; /* end.gif 的高 */
}
#nav li {
	position: absolute;
	overflow: hidden;
	padding: 0;
	margin: 0 ;
}
#nav li a {
	text-indent: -9999px;
	display: block;
	width: 170px; /* 預設的寬 */
	height: 30px; /* 圖片的高 */
}
a.abgne {
	background-image: url(nav1.gif);
}
a.jelly {
	background-image: url(nav2.gif);
}
a.jquery {
	background-image: url(nav3.gif);
}
a.intro {
	background-image: url(nav4.gif);
}
a.about {
	background-image: url(nav5.gif);
}
a.help {
	background-image: url(nav6.gif);
}

這邊要把 li 都設成 position: absolute;，這樣我們才能控制它的 left 屬性來做位置的移動。

再看程式之前，先看一下選單圖片的設定值

jquery_accordion_menu_1

筆者這邊取 64px 是用來當圖示 icon 用的，當選單被其它選單覆蓋時，至少還能看到圖示，等展開後才看到完整的內容。先來偷偷看一下完整的畫面

jquery_accordion_menu_2

不過我們選單位置預設都會是在 left: 0; 的位置，因此接下來整個部份就是靠 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

$(function(){
	// 初始化參數
	var _navLi = $("#nav li"),
		speed = 200,	// 移動速度
		maxWidth = 170,	// 最大寬
		minWidth = 64,  // 最小寬
		diffWidth = maxWidth - minWidth;
 
	_navLi.each(function(i){
		var _this = $(this),
			_prev = _this.prev(),
			_left = !_prev.length ? 0 :(_prev.position().left + (i==1 ? maxWidth : minWidth));
		// 先把每一個 li 的位置都放到定位
		// 並把 left 值記錄起來
		_this.css("left", _left).data("left", _left);
	}).mouseover(function(){
		// 當滑鼠移到選項時, 把它後面選項都滑動回去
		// 再把自己跟前面的選項都往前滑揩
		$(this).nextAll().each(slideBack).end().prevAll().andSelf().each(function(){
			var _this = $(this);
			if(_navLi.index(_this)>0){
				_this.stop().animate({
					left: _this.data("left") - diffWidth
				}, speed);
			}
		});
	});
 
	// 當滑鼠離開 #nav 時把選項都滑回原來位置
	$("#nav").mouseleave(function(){
		$("li", this).each(slideBack);
	});
 
	// 控制選項的滑動
	function slideBack(){
		var _this = $(this);
		_this.stop().animate({
			left: _this.data("left")
		}, speed);
	}
});

加上 jQuery 後來看看瀏覽效果吧：
jquery_accordion_menu_3

筆者預設是把第一個選項展開來的，後面的選項只顯示 64px 左右的圖示。整個程式比較麻煩的是上下兄弟元素的滑入及滑出動作是需要比較繁瑣的動作，不過這樣的效果執行起來其實也算是蠻特別的啦！

範例 1

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

37 筆針對 [jQ]用 jQuery 做選單 – 橫向 Accordion 式選單 的迴響

1 2 3

  2. 老師你好，
    我想請問一下，這個版本的jQuery和FancyBox是不是有衝突？
    我在同一個畫面上使用這兩種jQuery後，其中一個就沒有作用了？
    謝謝唷！

    • FancyBox 是蠻舊的版本了, 可能你引用的 jQuery 版本太新, 所以有些語法已經不支援了!
      你可以改用 FancyBox2 試試~

1 2 3

發表迴響