常見的 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 屬性來做位置的移動。
再看程式之前,先看一下選單圖片的設定值
筆者這邊取 64px 是用來當圖示 icon 用的,當選單被其它選單覆蓋時,至少還能看到圖示,等展開後才看到完整的內容。先來偷偷看一下完整的畫面
不過我們選單位置預設都會是在 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 後來看看瀏覽效果吧:
筆者預設是把第一個選項展開來的,後面的選項只顯示 64px 左右的圖示。整個程式比較麻煩的是上下兄弟元素的滑入及滑出動作是需要比較繁瑣的動作,不過這樣的效果執行起來其實也算是蠻特別的啦!
很不錯的選單特效,感謝分享~
請問下面這個檔案是要連結他的網址嗎?
因為我將檔案放在自己空間,連結後不能顯示~
jquery-latest.pack.js
因為是基於 jQuery 上的程式, 因此你得先引用 jQuery 才行。
我範例用的 jQuery.js 都是直接連官方最新版的..
你可以自己到官方網站去下載後放在自己的空間中
版主,你好
看到你這個選單
讓我想娶我一直很喜歡的網站:
LINNKIN PARK: http://linkinpark.com/
我看過原始碼,看不太出來他的形式原理
不知道是不是可以解釋一下程式的邏輯
感謝
其實達到同樣效果的方法很多種..
只要把區塊設成浮動並預留展開後的空間..接著只要點某一選單後再把其它的選單區塊往後推就可以了
謝謝版主
我試著寫寫看....
請問一下大師~
像這樣橫式的選單
有沒有可能變成3層
例如:
A/ a 1.2.3. -b-c B/ C/ D
有機會再請給點建議~
謝謝!!大師~
要不要把你所想的樣子畫出來看看XD
簡單說就是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 的設計..
我範例中選單整個的寬度是固定的...如果你要三層的話..那是否第三層還要再把其它的寬擠壓的更小呢..?
恩~ 我主要是點的那一層為最寬其他縮小是OK 的~
本來是天真的打算用 Ul li 的層級方式來做這個選單
UL LI 應該也是能做到你要的選單..只是要搞好 CSS
我找這種類似的特效好久了,都一無所獲
而您提供的這種效果真是令人眼前一亮
最重要的是它在GOOGLE瀏覽器上運作正常
使得小弟正在製作的資料網有了個方向
謝謝您的無私分享!
若有看到其它有趣的效果時,都很歡迎來分享討論的。
我研究了好久
因為大大是讓它向左展開
那我該怎麼向右展開呢?
第一步要先能把畫面排出來..XD
如果排出來後...再看你的 css 設計的方式來決定
請問版主
你的javascript程式碼是要放在哪??
你說引用jquery是要怎麼引用//
麻煩你解說一下
補充一下
版主你說要去官方網站下載放在自己空間
所以他沒辦法在本機作測試嗎
要怎樣作連結跟測試呢??
拜託解說一下了
可以在本機測啊..
你知道怎樣引用 script 檔案嗎..?