今天制作了一款选项卡菜单,其实本质上和普通的选项卡没什么区别,对于菜单项有hover效果,有选中效果,所增加的就是,菜单项可以有无数个,当总菜单项的宽度之和超出选项卡的固定宽度时,会出现向右移动按钮,这时,多出的菜单项会被隐藏掉。然后,可以点击移动按钮来移动菜单项,这样隐藏的菜单项就出来了,并且菜单项可以无数多个,自由增加。下面就来具体看一下吧:
首先是页面结构:(已省略掉一部分li标签,都是一样的,可自由添加)
<div class="tab-menu-box"> <ul class="tab-menu-list"> <li> <a href="javascript:void(0);" class="active">前端开发HTML5</a> </li> <li> <a href="javascript:void(0);">前端开发CSS3</a> </li> <!--同样的结构,若干个省略掉的li--> <li> <a href="javascript:void(0);">前端开发JS</a> </li> <li> <a href="javascript:void(0);">WEB前端开发</a> </li> </ul> <!--左右移动按钮--> <a href="javascript:void(0);" class="btn-toLeft"><<</a> <a href="javascript:void(0);" class="btn-toRight">>></a> </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(); } }); });