浙江 杭州

支持键盘控制的扁平风格水平滑动Tab选项卡

系统分类: 网页特效 - jquery插件 - jQuery选项卡/Tabs 2016-07-13

人气6872

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

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

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:89.24KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1747.html 非特殊说明,本文版权归原作者所有,转载请注明出处
支持键盘控制的扁平风格水平滑动Tab选项卡

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有2 评论)