演示在本文後面
常見的 Accordion 菜單都是豎直為主，這次筆者要教各位寫一個變形的橫向 Accordion 式菜單，讓我們的選單硬是跟其它人不一樣。
廢話就不多寫了，直接來看 HTML：
以下是引用片段：
<body>
<div id="nav_container">
<div class="navend"></div>
<ul id="nav">
<li><a href=http://www.poluoluo.com 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 屬性來做位置的移動。
筆者這邊取 64px 是用來當圖示 icon 用的，當選單被其它選單覆蓋時，至少還能看到圖示，等展開後才看到完整的內容。
不過我們選單位置預設都會是在 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 後來看看效果吧：
演示地址:http://www.poluoluo.com/example/jquery/1/test.html
轉載請注明破洛洛