支持键盘控制的扁平风格水平滑动Tab选项卡_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款非常实用的支持键盘控制的扁平风格水平滑动选项卡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的位置，使它们在下一次动画之前处于正确的位置之上。

具体实现代码前参考下载文件。