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

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

苏州实时公交查询

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

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 -->

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

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;
}

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

$(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();
        }
    });
});


Demo

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

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

支付宝扫一扫打赏

微信扫一扫打赏