拥有与众不同的导航能够给网店带来访客量，而古老的Accordion 菜单都是以竖直为主，想要不一样的菜单吗？请看看网店系统横向Accordion式导航制作方法，简单实用哦！
HTML：
|
以下为引用的内容：
<body>
<div id="nav_container">
<div class="navend"></div>
<ul id="nav">
<li><a href=http:/www.wqeshop.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 用的，当选单被其它选单覆盖时，至少还能看到图示，等展开后才看到完整的内容。
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);
}
}); |
网店系统 www.wqeshop.com 转载来源：破洛洛