Home » jQuery 應用

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

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

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

廢話就不多寫了,直接來看 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 的部份:

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. 不好意思我補充一下
    我開新檔案應該用html就可以了巴??
    我將老師的javascript語法另存一個js檔再同一個資料夾
    然後用script src="xxx.js"
    這樣的方式去引用
    請問正確嗎
    因為我本機測試時都看不到東西

  2. 老師您好,不知老師是否有遇到這樣的問題,關於Accordion套件,如果在標題地方有設定href(該標題下沒有下一層分類),欲直接超連結至href之設定網址,似乎要設定navigation這個屬性,但我再怎麼點擊都無法到該網址,但在event屬性設成 mouseover就可以超連結,不知老師是否有好的建議,謝謝!

    • 也許還要再覆寫 navigationFilter 屬性吧!!
      如果還是搞不定的話, 弄個簡單的範例發表在討論區來讓大家幫你找看看問題在那!!

  3. 版組你好!
    想請教您.....
    我想要做出像這樣的效果
    就是點下去之後畫面變暗
    然後說明頁面跑出來
    以下是參考網站
    http://blancell.jp/portfolio/

    我看了原始碼後
    只有看到
    $(function(){
    $("#corporatelist").vgrid({
    easeing: "easeOutQuint",
    time: 800,
    delay: 80,
    fadeIn: {
    time: 800,
    delay: 100
    }
    });
    });
    關於說明頁要怎麼設定呢?
    麻煩您了!

  4. 敢問 版主大大 最近 要做一個 類似 水族箱 但比較簡單 只要游到右邊不見後 再遊到左邊不見
    請問 有指令可以讓魚轉向還是要寫兩個影格呢?

  5. 請問大大~~~有兩個問題:

    如果按老師做的範例

    1.如何往左靠?(原本範例是往右)
    2.將滑鼠移到範例的 "指" , 能否做成預設就是停在這個位子
    當移動其他menu時,menu的滑動跟現在一樣(或反方向)

    再麻煩你了~~感謝^^

    • 1.這要修改文章中程式區塊的第 12 行的部份, 要先把他們的位置就先靠左.
      2.你是要當滑鼠移上去時就停在展開的選單上嗎?如果是的話, 可以試著把文章中程式區塊的第 30-32 行拿掉後試試.

  6. 大大~~

    請教一下~~~
    如果將滑鼠移到"簡",他就會show出簡整個menu
    有辦法讓他預設就是在"簡介"這個menu嗎?

    當滑鼠移到別的右邊的menu(關.幫)時,一樣會有向左滑的動作,離開則又回到"簡"的menu
    當滑鼠移到別的左邊的"JQ" menu時,"簡"menu一樣會有向右滑的動作,依此類推當移到
    "小"menu時,"JQ"menu一樣會有向右滑的動作,其他左邊menu依此類推,而當滑鼠離開該menu時則又回到"簡"的menu

    這樣的程式是不是很複雜~~~大大有辦法幫忙撰寫嗎?

    謝謝^^

  7. 老師你好,
    我想請問一下,
    如果預設是全部縮起來,
    滑鼠移到選項才滑開,
    想請問一下要怎麼修改呢?

    謝謝了^^

    • 唔, 若是全關起來(靠左)的話, 在一開始計算位置的部份就要讓它們的 left 變成 minWidth * i
      然後當滑鼠移入移出時, 整個位置的移動方式要再改變才行~

發表迴響