这是一款非常时尚的jQuery和CSS3侧边栏布局和切换页面动画特效。该侧边栏布局采用响应式设计，在点击了某个菜单项之后，侧边栏的右边部会出现一条全屏高度的进度条。进度条动画之后，相应的页面从左向右平滑的滑出。

制作方法

HTML结构

该侧边栏布局的HTML结构使用一个.cd-main元素来包裹页面的内容。.cd-side-navigation用于包裹侧边栏元素。还有一个#cd-loading-bar用于制作阿波罗右侧的进度条动画。

<nav class="cd-side-navigation">
  <ul>
    <li>
      <a href="index.html" class="selected" data-menu="index">
        <svg><!-- svg content here --></svg>
        Intro
      </a>
    </li>
 
    <li>
      <!-- ... -->
    </li>
 
    <!-- other list items here -->
  </ul>
</nav> <!-- .cd-dashboard -->
 
<main class="cd-main">
  <section class="cd-section index visible">
    <header>
      <div class="cd-title">
        <h2>Animated Page Transition #2</h2>
        <span>Some text here</span>
      </div>
      
      <a href="#index-content" class="cd-scroll">Scroll Down</a>
    </header>
 
    <div class="cd-content" id="index-content">
      <!-- content here -->
    </div> <!-- .cd-content -->
  </section> <!-- .cd-section -->
</main> <!-- .cd-main -->
<!-- lateral loading bar -->
<div id="cd-loading-bar" data-scale="1" class="index"></div>
CSS样式

侧边栏.cd-side-navigation使用固定定位方式，它的高度设置为100%，同时设置overflow:hidden;。并且它的子元素<ul>设置了一个overflow-y: auto属性，这样，如果侧边栏的内容比页面的高度要高，可以在内部滚动侧边栏。

为了创建在鼠标滑过菜单项时出现在右侧的线条，该特效中使用a::after伪元素来制作它。它们采用绝对定位，4像素宽，和top:0;，right:-4px;。

这里要注意的是每一个列表项元素的宽度使用calc(100%- 4px)来计算，这样可以使a::after伪元素放置在.cd-side-navigation的内部。

.cd-side-navigation {
 position: fixed;
 z-index: 3;
 top: 0;
 left: 0;
 height: 100vh;
 width: 94px;
 overflow: hidden;
}
.cd-side-navigation ul {
 height: 100%;
 overflow-y: auto;
}
.cd-side-navigation::before {
 /* background color of the side navigation */
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: calc(100% - 4px);
 background-color: #131519;
}
.cd-side-navigation li {
 width: calc(100% - 4px);
}
.cd-side-navigation a {
 display: block;
 position: relative;
}
.cd-side-navigation a::after {
 /* 4px line to the right of the item - visible on hover */
 content: '';
 position: absolute;
 top: 0;
 right: -4px;
 height: 100%;
 width: 4px;
 background-color: #83b0b9;
 opacity: 0;
}
.no-touch .cd-side-navigation a:hover::after {
 opacity: 1;
}

但用户选择了一个新的菜单项之后，特效中会创建一个新的.cd-section元素，并将它插入到DOM中。

默认情况下，.cd-section元素被使用translateX(-100%)移动到左侧屏幕之外。在用户点击菜单项之后，它被赋予.visible class，使它移动会屏幕之中。

.cd-section{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
  transition: transform 0s 0.5s;
}
.cd-section.visible {
  /* this is the visible/selected section */
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.5s 0s;
}
JAVASCRIPT

该特效中所有的文件的HTML结构都基本相同，只是.cd-section中的内容有所不同。

当用户点击一个菜单项的时候，triggerAnimation()函数会被触发。这个函数会触发进度条动画函数loadingBarAnimation()，并通过loadNewContent()函数来加载新的内容。

对于加载进度条，特效中使用Velocity.js来制作动画效果。在进度条动画开始之前，进度条#cd-loading-bar被放置在菜单项的右侧，高度和菜单项相同。然后通过scaleY来制作进度条的动画效果。

function loadingBarAnimation() {
  //loadingBar is the #cd-loading-bar element
  //scaleY is the loadingBar actual scale value
  //this is the scaleY value to cover the entire window height (100% loaded)
  var scaleMax = loadingBar.data('scale'); 
  if( scaleY + 1 < scaleMax) {
    newScaleValue = scaleY + 1;
  } 
  // ...
  
  loadingBar.velocity({
    scaleY: newScaleValue
  }, 100, loadingBarAnimation);
}

当一个新的页面被选择了之后，.cd-section元素会被创建并插入到DOM中。然后使用load()函数来加载新的内容。这里在菜单项中使用一个data-menu属性来决定要加载哪个文件。在页面被加载之后，进度条动画结束，旧的页面内容被新的页面内容替换，新的页面内容使用pushState()方法来放入到window.history中。

function loadNewContent(newSection) {
  //create a new section element and insert it into the DOM (newSection is the data-menu of the selected navigation item)
  var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);
  
  //load the new content from the proper html file
  section.load(newSection+'.html .cd-section > *', function(event){
    
    loadingBar.velocity({
      scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded)
    }, 400, function(){
      
      //add the .visible class to the new section element -> it will cover the old one
      section.addClass('visible');
 
      var url = newSection+'.html';
 
      if(url!=window.location){
            //add the new page to the window.history
            window.history.pushState({path: url},'',url);
        }
 
        // ...
    });
  });
}

为了让用户在点击浏览器的回退按钮时得到相同的动画效果，特效中监听popstate事件，并通过triggerAnimation()方法来触发它。