这是一款非常实用的支持键盘控制的扁平风格水平滑动选项卡UI设计效果。该Tab选项卡采用全屏设计,每一个Tab一种颜色,点击相应的Tab时会滑出相应颜色的选项卡内容。你还可以使用键盘的左右方向键来控制选项卡的切换。
制作方法
HTML结构
选项卡由一个<nav>
元素组成,它的里面是一个无序列表。div.burger
是一个关闭按钮,可以隐藏和显示选项卡。
<nav class="nav nav--active"> <ul class="nav__list"> <li class="nav__item"> <a href="" class="nav__link"> <div class="nav__thumb color1" data-letter="a"></div> <p class="nav__label">About</p> </a> </li> ...... </ul> <div class="burger burger--close"> <div class="burger__patty"></div> </div> </nav>
每一个<section class="section">
都使用绝对定位使它们堆叠在一起。隐藏的section会被使用translate:100%;
移动到屏幕之外,在相应选项卡被点击的时候才被移动会原来的位置。当一个新的选项卡被移动到屏幕中,原来的选项卡被使用translate:-100%;
移动到屏幕屏幕左边。当过渡动画完成之后,移动到屏幕左边的section会被重置回屏幕的右边,这样可以保证在下一次移动时处于正确的位置。
<div class="page"> <section class="section color2" data-letter="p"> <article class="section__wrapper"> <h1 class="section__title">...</h1> <p>...</p> </article> </section> ... </div>
CSS样式
<nav>
元素使用position: fixed
将其固定在屏幕的上方。每一个section都使用position: absolute
使它们堆叠在一起,然后使用transform: translateX(100%)
将它们移动并隐藏。
.nav { will-change: transform; position: fixed; top: 0; left: 0; width: 100%; z-index: 1; background: #1a1a1a; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1); } .nav--active { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .section { will-change: transform; position: absolute; width: 100%; top: 0; left: 0; height: 100vh; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: #fff; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); } .section--hidden { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .section--active { -webkit-transform: translateX(0) rotateY(0); transform: translateX(0) rotateY(0); z-index: 2; }
JAVASCRIPT
这个TAB选项卡的jQuery代码中主要使用.eq()
和.index()
方法来在点击Tab的时候隐藏和显示正确的选项卡内容。当用户点击某个Tab时,代码中保存列表项的索引序号,然后使用这个值来选择正确的section。然后在原来的选项卡上添加class来隐藏它,并在当前激活的选项卡上添加class来将它移动会屏幕中。
当过渡动画完成之后(使用transitionend
事件),代码中重置隐藏section的位置,使它们在下一次动画之前处于正确的位置之上。
具体实现代码前参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!