jQuery制作可以向两边滑动的选项卡菜单

2014-03-26阅读(5541)评论(0)牵着狗狗看MM

苏州实时公交查询

天制作了一款选项卡菜单,其实本质上和普通的选项卡没什么区别,对于菜单项有hover效果,有选中效果,所增加的就是,菜单项可以有无数个,当总菜单项的宽度之和超出选项卡的固定宽度时,会出现向右移动按钮,这时,多出的菜单项会被隐藏掉。然后,可以点击移动按钮来移动菜单项,这样隐藏的菜单项就出来了,并且菜单项可以无数多个,自由增加。下面就来具体看一下吧:

HTML代码

[html]
<!– nav –>
<div class="nav">
<ul class="nav-list">
<li>
<a href="#">System Administration
</a>
</li>
<li>
<a href="#">Master Data Setup</a>
</li>
<li>
<a href="#">Resource Configuration</a>
</li>
<li>
<a href="#">Student Management</a>
</li>
<li>
<a href="#">Tutro Management</a>
</li>
<li>
<a href="#">Center Management</a>
</li>
</ul>
<a href="javascript:void(0);" class="btn-toLeft">&lt;&lt;</a>
<a href="javascript:void(0);" class="btn-toRight">&gt;&gt;</a>

</div>
<!– /nav –>

[/html]

对于CSS布局是这样的:
让ul绝对定位,这样方便左右移动,同时两个按钮也要就对定位,分别位于选项卡两边。ul的宽度是由js动态处理的,ul的宽度是所有的li的宽度及其margin之和,然后会有一部分超出父级的宽度,此时,让超出部分隐藏掉就可以了(父级设置overflow属性)。

CSS代码

[css].nav {
width: 980px;
height: 33px;
margin: 0 auto;
position: relative;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(149, 149, 149, .7);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FB7EB3), to(#ff4d98));
background: -moz-linear-gradient(#FB7EB3, #ff4d98);
background: -ms-linear-gradient(top left, #FB7EB3, #ff4d98);
background: -o-linear-gradient(top left, #FB7EB3, #ff4d98);
background: linear-gradient(top left, #FB7EB3, #ff4d98);
overflow: hidden;
}
.nav .nav-list {
position: absolute;
width: 980px;
height: 33px;
z-index: 1;
}
.nav li {
float: left;
line-height: 33px;
border-right: 1px solid #F2F2F2;
}
.nav .btn-toLeft,
.nav .btn-toRight {
display: none;
position: absolute;
z-index: 2;
top: 2px;
width: 20px;
height: 33px;
line-height: 33px;
color: #fff;
text-align: center;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FB7EB3), to(#ff4d98));
background: -moz-linear-gradient(#FB7EB3, #ff4d98);
background: -ms-linear-gradient(top left, #FB7EB3, #ff4d98);
background: -o-linear-gradient(top left, #FB7EB3, #ff4d98);
background: linear-gradient(top left, #FB7EB3, #ff4d98);
}
.nav .btn-toLeft:hover,
.nav .btn-toRight:hover {} .nav .btn-toLeft {
left: 0;
}
.nav .btn-toRight {
right: 0;
}
.nav > ul > li > a {
font-size: 14px;
font-weight: bold;
line-height: 33px;
height: 33px;
color: #fff;
display: block;
padding: 0 18px;
}
.nav > ul > li > a.cur {
color: #ff4d98;
background: #fff;
}
[/css]

最后就是js部分了(这里用到了jquery库):
这一块就是实现的逻辑的了,要想想在什么条件下按钮出现,然后点击按钮后怎样然ul移动,再次点击后继续移动,一直移动到菜单全部出现,也即是ul要移动到”尽头”。

[js]
$(function () {
var oTabMenu = $(".nav");
var oTabMenuList = $(oTabMenu).find(".nav-list");
var aLi = $(oTabMenuList).find("li");
var aMenus = $(oTabMenuList).find("li a");
var oMenuBtnL = $(oTabMenu).find(".btn-toLeft");
var oMenuBtnR = $(oTabMenu).find(".btn-toRight");
var disX = 0;
var l = 0;

function reset() {
var ulWidth = 0;
for (var i = 0; i < aLi.length; i++) {
ulWidth += aLi.eq(i).width() + 10;
}
oTabMenuList.css("width", ulWidth);
if (oTabMenuList.width() > oTabMenu.width()) {
oMenuBtnR.show();
}
disX = oTabMenuList.width() – oTabMenu.width();
}

function move(dis) {
oTabMenuList.animate({"left": dis}, 400);
}

reset();

/*可以添加选项卡的内容,点击相应菜单显示相应内容*/

oMenuBtnR.click(function () {
if (l >= -disX) {
l += -100;
move(l);
}
if (l < 0) {
oMenuBtnL.fadeIn();
}
if (l < -disX) {
oMenuBtnR.fadeOut();
}
});

oMenuBtnL.click(function () {
if (l < 0) {
l += 100;
move(l);
}
if (l >= 0) {
oMenuBtnL.fadeOut();
}
if (l >= -disX) {
oMenuBtnR.fadeIn();
}
});
});

[/js]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery制作可以向两边滑动的选项卡菜单
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏