今天网站制作了一款选项卡菜单，其实本质上和普通的选项卡没什么区别，对于菜单项有hover效果，有选中效果，所增加的就是，菜单项可以有无数个，当总菜单项的宽度之和超出选项卡的固定宽度时，会出现向右移动按钮，这时，多出的菜单项会被隐藏掉。然后，可以点击移动按钮来移动菜单项，这样隐藏的菜单项就出来了，并且菜单项可以无数多个，自由增加。下面就来具体看一下吧：
首先是页面结构：(已省略掉一部分li标签，都是一样的，可自由添加)
<DIV class=tab-menu-box>
<UL class=tab-menu-list>
<LI><P><A class=active href="javascript:void(0);">前端开发HTML5</A></P></LI>
<LI><P><A href="javascript:void(0);">前端开发CSS3</A></P></LI>
<P><!--同样的结构，若干个省略掉的li--></P>
<LI><P><A href="javascript:void(0);">前端开发JS</A></P></LI>
<LI><P><A href="javascript:void(0);">WEB前端开发</A></P></LI>
</UL>
<P><!--左右移动按钮--></P>
<P><A class=btn-toLeft href="javascript:void(0);"><<</A></P>
<P><A class=btn-toRight href="javascript:void(0);">>></A></P>
</DIV>
对于CSS布局是这样的：
让ul绝对定位，这样方便左右移动，同时两个按钮也要就对定位，分别位于选项卡两边。ul的宽度是由js动态处理的，ul的宽度是所有的li的宽度及其margin之和，然后会有一部分超出父级的宽度，此时，让超出部分隐藏掉就可以了(父级设置overflow属性)。另外，代码就不贴了，最后边会给出下载链接，可以下下去自己看。
最后就是js部分了(这里用到了jquery库)：
这一块就是实现的逻辑的了，要想想在什么条件下按钮出现，然后点击按钮后怎样然ul移动，再次点击后继续移动，一直移动到菜单全部出现，也即是ul要移动到”尽头”，这个得判定条件是什么，这些都是需要好好思考的，可以写写画画，也许就想出来了。
$(function () {
var oTabMenu = $(".tab-menu-box");
var oTabMenuList = $(oTabMenu).find(".tab-menu-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();
aMenus.click(function () {
aMenus.removeClass("active");
$(this).addClass("active");
/*可以添加选项卡的内容，点击相应菜单显示相应内容*/
});
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();
}
});
});