当前位置:网站首页 / 建站知识 / 网站制作知识

网站制作实现向两边滑动选项卡菜单

来源:未知时间:2014-08-25 14:33点击:

今天网站制作了一款选项卡菜单,其实本质上和普通的选项卡没什么区别,对于菜单项有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);">&lt;&lt;</A></P>
<P><A class=btn-toRight href="javascript:void(0);">&gt;&gt;</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();
 }
 });
 });