問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]橫向 Accordion 式選單



[jQuery]橫向 Accordion 式選單
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
常見的 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 的部份:

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

再看程式之前,先看一下選單圖片的設定值
Open in new window


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


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

$(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 後來看看瀏覽效果吧:
Open in new window


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

範例瀏覽:
http://demonstration.abgne.tw/jquery/0010/0010.html


以上內容於2009-09-25 13:48 發表在 http://abgne.tw/jquery/apply-jquery/jquery-accordion-menu.html

2009/12/1 14:11
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS