使用HTML5开发支持键盘控制的扁平风格水平滑动Tab选项卡

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

     关注恒泰博远官方微信，即可免费体验微信定制功能，HTML5营销游戏和场景应用，以及免费的微信企业号功能使用     

       想免费体验微信企业号，无需注册微信企业号、无需安装APP、也可体验，关注恒泰博远官方微信后，点击-企业号-快速体验，输入相关信息，即可免费体验。      

      恒泰博远为助力企业发展，旗下微赢企业号平台，所有功能免费用。想要开通企业号功能使用，请拨打：010-82969001