Home » jQuery 應用

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

[ 日期： | 瀏覽：50,217 | 迴響：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

  1. 很不錯的選單特效,感謝分享~
    請問下面這個檔案是要連結他的網址嗎?
    因為我將檔案放在自己空間,連結後不能顯示~
    jquery-latest.pack.js

    • 因為是基於 jQuery 上的程式, 因此你得先引用 jQuery 才行。
      我範例用的 jQuery.js 都是直接連官方最新版的..
      你可以自己到官方網站去下載後放在自己的空間中

    • 其實達到同樣效果的方法很多種..
      只要把區塊設成浮動並預留展開後的空間..接著只要點某一選單後再把其它的選單區塊往後推就可以了

  4. 請問一下大師~
    像這樣橫式的選單
    有沒有可能變成3層
    例如：
    A/ a 1.2.3. -b-c B/ C/ D
    有機會再請給點建議~
    謝謝!!大師~

  5. 簡單說就是TREEMENU 三層橫式
    例如以您本章的例子來說
    http://demonstration.abgne.tw/jquery/0010/0010.html
    當我按下"小"展開之後出現"小神童"
    能否再增加 "小神童" 點了其中的"小" 再出現 "是我" 的字樣

    哈~
    不知道這樣有沒有越描越模糊
    又好比這個案例
    http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html
    *1展開之後，我想點 This is 再展開一個空的
    這樣就有3個層級了~

    3Q

    • 這應該是要看整個 UI 的設計..
      我範例中選單整個的寬度是固定的...如果你要三層的話..那是否第三層還要再把其它的寬擠壓的更小呢..?

  6. 恩~ 我主要是點的那一層為最寬其他縮小是OK 的~
    本來是天真的打算用 Ul li 的層級方式來做這個選單

  7. 我找這種類似的特效好久了,都一無所獲

    而您提供的這種效果真是令人眼前一亮

    最重要的是它在GOOGLE瀏覽器上運作正常

    使得小弟正在製作的資料網有了個方向

    謝謝您的無私分享!

  10. 補充一下
    版主你說要去官方網站下載放在自己空間
    所以他沒辦法在本機作測試嗎
    要怎樣作連結跟測試呢??
    拜託解說一下了

1 2 3

發表迴響