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