男丁格爾's 脫殼玩

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

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

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

<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

#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 屬性來做位置的移動。

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

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

不過我們選單位置預設都會是在 left: 0; 的位置，因此接下來整個部份就是靠 jQuery 來完成的：

檢視原始碼 JavaScript

$(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 後來看看瀏覽效果吧：

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

範例 1

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

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

brian 於 2010-09-27 14:30:17 說：

抱歉
我不是很了解耶
還算是個新手

登入後再回覆
brian 於 2010-09-27 15:34:48 說：

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

登入後再回覆
毛怪於 2010-12-07 17:32:04 說：

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

登入後再回覆
- 男丁格爾於 2010-12-09 09:45:22 說：
  
  也許還要再覆寫 navigationFilter 屬性吧!!
  如果還是搞不定的話, 弄個簡單的範例發表在討論區來讓大家幫你找看看問題在那!!
  
  登入後再回覆
tuoyeliao 於 2011-11-14 10:12:09 說：

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

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

登入後再回覆
- 男丁格爾於 2011-11-18 16:48:08 說：
  
  主是要燈箱(lightbox)的效果而已~
  
  登入後再回覆
tuoyeliao 於 2011-11-24 15:36:50 說：

原來叫做燈箱效果...
已經搜尋到了
謝謝您！！

登入後再回覆
鳥朋於 2011-11-24 20:18:26 說：

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

登入後再回覆
- 男丁格爾於 2011-12-08 11:20:00 說：
  
  我..我已經不會 flash 了(技能點數不夠, 學 jQuery 前就先遺忘了 Flash)
  
  登入後再回覆
舞筆靈手於 2012-06-29 17:51:49 說：

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

如果按老師做的範例

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

再麻煩你了~~感謝^^

登入後再回覆
- 男丁格爾於 2012-07-05 13:43:46 說：
  
  1.這要修改文章中程式區塊的第 12 行的部份, 要先把他們的位置就先靠左.
  2.你是要當滑鼠移上去時就停在展開的選單上嗎?如果是的話, 可以試著把文章中程式區塊的第 30-32 行拿掉後試試.
  
  登入後再回覆
jom217 於 2012-07-02 11:41:46 說：

大大~~

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

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

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

謝謝^^

登入後再回覆
- 男丁格爾於 2012-07-05 13:49:53 說：
  
  要預設的話, 可以試著在文章中程式區塊的第 27 行加上 .eq(3).mouseover();
  
  登入後再回覆
MONZIN 於 2012-07-18 22:25:51 說：

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

謝謝了^^

登入後再回覆
monzin 於 2012-07-19 19:14:39 說：

版主你好，
想請問如果把預設全部都縮起來，
要怎麼修改呢??

麻煩妳了，謝謝^^

登入後再回覆
- 男丁格爾於 2012-07-23 10:54:02 說：
  
  唔, 若是全關起來(靠左)的話, 在一開始計算位置的部份就要讓它們的 left 變成 minWidth * i
  然後當滑鼠移入移出時, 整個位置的移動方式要再改變才行~
  
  登入後再回覆