带炫酷过渡动画效果的响应式隐藏侧边栏界面设计

这是一款带炫酷过渡动画效果的响应式隐藏侧边栏界面设计效果。该隐藏侧边栏采用推拉式设计，侧边栏打开时页面的主内容会被推动。另外，在侧边栏打开的状态下，缩放浏览器到一定大小的时候，侧边栏会像被吸附一样扩展到全屏，效果非常酷。

使用方法

该侧边栏设计的图标使用的是font-awesome字体图标，使用是需要引入font-awesome.min.css文件。

<link rel="stylesheet" href="/path/to/font-awesome.min.css">    
              

HTML结构

侧边栏的HTML结构如下：

<aside>
  <h2>网站Logo</h2>
  <div class="controls">
  <input type="search" id="search" name="search" />
    <label for="search"><i class="fa fa-search"></i></label>
  </div>
  <nav class='site-nav'>
    <a class="active" href="#"><i class="fa fa-home"></i> Home</a>
    <a href="#"><i class="fa fa-gift"></i> Deals & packages</a>
    <a href="#"><i class="fa fa-line-chart"></i> Report Builder</a>
    <a href="#"><i class="fa fa-bell-o"></i> Notifications</a>
  </nav> 
  <footer>
    <a href="" class="avatar">
      <img src="" alt="" />brady Sammons</a>
    <a href=""><i class="fa fa-sign-out fa-rotate-180"></i> Logout</a>  
  </footer>
</aside>   
              

正文部分使用一个<section>元素来包裹。

<section>
  <article>
    <h2>Post Two</h2>
    <p>...</p>
  </article>
  ......
</section>                
              

用于触发侧边栏菜单的按钮放置在顶部导航条上。

<header>
  <div class="left">
    <button id="menu" title="Menu"><i class="fa fa-bars fa-2x"></i></button>
    <h1>Acme CO TNT Division</h1>
  </div>
  
  <div class="utils right">
    <a href="#" class='alerts'><i class="fa fa-bell-o fa-lg"></i></a>
    <i class="sep"> </i>
    <a href="#"><i class="fa fa-life-ring fa-lg"></i></a>
  </div>
</header>                
              

CSS样式

侧边栏菜单的基本CSS样式如下：注意这是移动优先的CSS代码编写方式。首先侧边栏被设置为固定定位，宽度和高度都是100%。并使用left: -100%;将其隐藏起来。它在宽度上使用了指定贝兹曲线的过渡动画效果，用来制作“gooey”效果。

aside {
  position: fixed;
  height: 100%;
  width: 100%;
  color: #fff;
  left: -100%;
  background-color: #2A3744;
  padding: 20px;
  -moz-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
  -o-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
  -webkit-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
  transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
}

aside a {
  padding: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  -moz-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}

aside a:hover { color: #fff; }

aside a i, aside a img {
  width: 20px;
  text-align: center;
  margin-right: 6px;
}

aside .site-nav a { margin-bottom: 3px; }

aside .site-nav a.active, aside .site-nav a:hover { background-color: rgba(0, 0, 0, 0.3); }

aside .site-nav a.active i { color: #24FFCE; }

aside footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  width: 100%;
  position: absolute;
  bottom: 40px;
  left: 0;
  padding-left: 10px;
}

aside footer a { padding: 8px; }
              

然后使用媒体查询设置在大屏幕的时候的侧边栏样式。

@media (min-width: 500px) {
  body.nav-open section {
    margin-left: 250px;
  }

  aside {
    position: fixed;
    top: 0;
    padding-top: 80px;
    width: 250px;
  }

  .site-footer {
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 0;
  }
}                
              

正文部分的样式非常简单，只是设置了一些最基本的样式。

section {
  -moz-transition: margin-left 0.4s ease;
  -o-transition: margin-left 0.4s ease;
  -webkit-transition: margin-left 0.4s ease;
  transition: margin-left 0.4s ease;
}
section article {
  padding: 20px;
}
section article h2 {
  font-weight: 300;
  font-size: 24px;
}
section article p {
  line-height: 1.5;
  margin-bottom: 10px;
}                
              

JavaScript

该侧边栏特效中使用jQuery来简单的处理主菜单按钮的点击事件，为相应的元素添加和移除相应的class。

$(function () {
    $('#menu').on('click', function () {
        $(this).toggleClass('active');
        $('body').toggleClass('nav-open');
    });
});