jQuery制作横向Accordion样式的导航菜单

演示在本文后面 常见的 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 转载请注明破洛洛