创意旋转式打开隐藏侧边栏UI界面设计

当前位置:主页 > CSS3库 > UI界面设计 > 创意旋转式打开隐藏侧边栏UI界面设计
创意旋转式打开隐藏侧边栏UI界面设计
分享:

    插件介绍

    这是一款效果非常炫酷的创意旋转式打开隐藏侧边栏UI界面设计。该侧边栏设计中,当用户点击侧边栏按钮的时候,整个页面会旋转一个角度,然后隐藏在页面下的侧边栏会被显示出来,效果非常的酷。

    浏览器兼容性

    浏览器兼容性
    时间:2015-09-24
    阅读:
简要教程

这是一款效果非常炫酷的创意旋转式打开隐藏侧边栏UI界面设计。该侧边栏设计中,当用户点击侧边栏按钮的时候,整个页面会旋转一个角度,然后隐藏在页面下的侧边栏会被显示出来,效果非常的酷。

使用方法

HTML结构

该侧边栏特效的HTML结构如下:.menu_toggle是侧边栏打开按钮,.menu_items是侧边栏菜单,main.content是页面内容。

<div class="page">
    <span class="menu_toggle">
      <i class="menu_open fa fa-bars fa-lg"></i>
      <i class="menu_close fa fa-times fa-lg"></i>
    </span>
    <ul class="menu_items">
      <li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
      <li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
      <li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
    </ul>
    <main class="content">
      <div class="content_inner">
        <h1>...</h1>
        <p>...</p>
      </div>
    </main>
</div>         
              
CSS样式

在CSS样式中,当用户点击了打开侧边栏按钮的时候,页面朱内容元素.content被添加了class .shazam,这时该元素被旋转了-30度,打开按钮被旋转了-20度。菜单的列表项开始时是被移动到屏幕之外的,这时被移动回原来的位置,并设置了每个列表项的动画延迟时间。这一系列的设置组成了旋转打开侧边栏的效果。

.shazam .content {
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg);
}
.shazam .menu_open {
  -webkit-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
.shazam .menu_close {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
.shazam .menu_items li {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu_items li:nth-child(2) {
  -webkit-transition-delay: .47s;
          transition-delay: .47s;
}
.shazam .menu_items li:nth-child(3) {
  -webkit-transition-delay: .48s;
          transition-delay: .48s;
}             
              
Javascript

在jQuery代码中,主要为点击按钮添加和移除相应的class。

var $page = $('.page');
$('.menu_toggle').on('click', function () {
    $page.toggleClass('shazam');
});
$('.content').on('click', function () {
    $page.removeClass('shazam');
});