良い作品を見ると、思わず集めたくなってしまいます 転載アドレス：http://www.gbtags.com/gb/rtreplayerpreview/1525.htm
<!doctype html>
<html lang="zh">
<head>
<title>14种侧边导航滑出动画效果</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta author="极客标签：www.gbtags.com" />
<meta name="Description" content="极客标签是一个基于web的在线极客编程知识分享&学习平台，能够帮助你快速高效地学习代码编程并方便的在线实时分享编程技巧和心得" />
<meta name="Keywords" content="极客,极客标签,轻视频,代码录播,在线调试,前端,前端社区,前端特效,素材,html5,javascript,css3,jquery,bootstrap,bootstrap3" />
<style>
@import url(http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css);
body {
background: #444;
color: #48a770;
font-weight: 300;
font-family: 'Lato', Calibri, Arial, sans-serif;
}
a {
text-decoration: none;
color: #48a770;
outline: none;
}
a:hover, a:focus {
color: #2c774b;
outline: none;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.codrops-header,
.codrops-top {
font-family: 'microsoft yahei', Arial, sans-serif;
}
.codrops-header {
margin: 0 auto 3em;
padding: 3em;
text-align: center;
}
.codrops-header h1 {
margin: 0;
font-weight: 300;
font-size: 2.625em;
line-height: 1.3;
}
.codrops-header span {
display: block;
padding: 0 0 0.6em 0.1em;
font-size: 60%;
color: #aca89a;
}
/* To Navigation Style */
.codrops-top {
width: 100%;
text-transform: uppercase;
font-size: 0.69em;
line-height: 2.2;
font-weight: 400;
background: rgba(255,255,255,0.3);
}
.codrops-top a {
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 0.1em;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.4);
color: #333;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
display: block;
float: left;
}
.codrops-icon:before {
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
.main {
max-width: 69em;
margin: 0 auto;
}
.column {
float: left;
padding: 0 2em;
min-height: 300px;
position: relative;
text-align: left;
}
.column:nth-child(2) {
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
text-align: left;
}
.column p {
font-weight: 300;
font-size: 2em;
padding: 0 0 0.5em;
margin: 0;
line-height: 1.5;
}
button {
border: none;
padding: 0.6em 1.2em;
background: #388a5a;
color: #fff;
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 1em;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
margin: 3px 2px;
border-radius: 2px;
}
button:hover {
background: #2c774b;
}
.info {
text-align: center;
font-size: 1.5em;
margin-top: 3em;
clear: both;
padding: 3em 0;
opacity: 0.7;
color: #aca89a;
}
.info a {
font-weight: 700;
font-size: 0.9em;
}
@media screen and (max-width: 46.0625em) {
.column {
width: 100%;
min-width: auto;
min-height: auto;
padding: 2em;
text-align: center;
}
.column p {
font-size: 1.5em;
}
.column:nth-child(2) {
text-align: center;
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}
}
@media screen and (max-width: 25em) {
.codrops-header {
font-size: 80%;
}
.codrops-top {
font-size: 120%;
}
.codrops-icon span {
display: none;
}
}
*,
*:after,
*::before {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
.st-container,
.st-pusher,
.st-content {
height: 100%;
}
.st-content {
overflow-y: scroll;
background: #f3efe0;
}
.st-content,
.st-content-inner {
position: relative;
}
.st-container {
position: relative;
overflow: hidden;
}
.st-pusher {
position: relative;
left: 0;
z-index: 99;
height: 100%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.st-pusher::after {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
background: rgba(0,0,0,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.st-menu-open .st-pusher::after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.st-menu {
position: absolute;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
width: 300px;
height: 100%;
background: #48a770;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.st-menu::after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.st-menu-open .st-menu::after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
/* content style */
.st-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.st-menu h2 {
margin: 0;
padding: 1em;
color: rgba(0,0,0,0.4);
text-shadow: 0 0 1px rgba(0,0,0,0.1);
font-weight: 300;
font-size: 2em;
}
.st-menu ul li a {
display: block;
padding: 1em 1em 1em 1.2em;
outline: none;
box-shadow: inset 0 -1px rgba(0,0,0,0.2);
color: #f3efe0;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255,255,255,0.1);
letter-spacing: 1px;
font-weight: 400;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
.st-menu ul li:first-child a {
box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}
.st-menu ul li a:hover {
background: rgba(0,0,0,0.2);
box-shadow: inset 0 -1px rgba(0,0,0,0);
color: #fff;
}
/* Individual effects */
/* Effect 1: Slide in on top */
.st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-1.st-menu-open .st-effect-1.st-menu {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-1.st-menu::after {
display: none;
}
/* Effect 2: Reveal */
.st-effect-2.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-2.st-menu {
z-index: 1;
}
.st-effect-2.st-menu-open .st-effect-2.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.st-effect-2.st-menu::after {
display: none;
}
/* Effect 3: Push*/
.st-effect-3.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-3.st-menu {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-3.st-menu-open .st-effect-3.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.st-effect-3.st-menu::after {
display: none;
}
/* Effect 4: Slide along */
.st-effect-4.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-4.st-menu {
z-index: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.st-effect-4.st-menu-open .st-effect-4.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-4.st-menu::after {
display: none;
}
/* Effect 5: Reverse slide out */
.st-effect-5.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-5.st-menu {
z-index: 1;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
.st-effect-5.st-menu-open .st-effect-5.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Effect 6: Rotate pusher */
.st-effect-6.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-6 .st-pusher {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-6.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0) rotateY(-15deg);
transform: translate3d(300px, 0, 0) rotateY(-15deg);
}
.st-effect-6.st-menu {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-6.st-menu-open .st-effect-6.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(15deg);
transform: translate3d(-100%, 0, 0) rotateY(15deg);
}
.st-effect-6.st-menu::after {
display: none;
}
/* Effect 7: 3D rotate in */
.st-effect-7.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.st-effect-7 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-7.st-menu {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-effect-7.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
/* Effect 8: 3D rotate out */
.st-effect-8.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.st-effect-8 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-8.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-8.st-menu {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
transform: translate3d(-100%, 0, 0) rotateY(90deg);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-8.st-menu-open .st-effect-8.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
.st-effect-8.st-menu::after {
display: none;
}
/* Effect 9: Scale down pusher */
.st-effect-9.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-9 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-9.st-menu-open .st-pusher {
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px);
}
.st-effect-9.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-9.st-menu-open .st-effect-9.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-9.st-menu::after {
display: none;
}
/* Effect 10: Scale up */
.st-effect-10.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.st-effect-10.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-10.st-menu {
z-index: 1;
opacity: 1;
-webkit-transform: translate3d(0, 0, -300px);
transform: translate3d(0, 0, -300px);
}
.st-effect-10.st-menu-open .st-effect-10.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Effect 11: Scale and rotate pusher */
.st-effect-11.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-11 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-11.st-menu-open .st-pusher {
-webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}
.st-effect-11.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-11.st-menu-open .st-effect-11.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-11.st-menu::after {
display: none;
}
/* Effect 12: Open door */
.st-effect-12.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.st-effect-12 .st-pusher {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-12.st-menu-open .st-pusher {
-webkit-transform: rotateY(-10deg);
transform: rotateY(-10deg);
}
.st-effect-12.st-menu {
opacity: 1;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.st-effect-12.st-menu-open .st-effect-12.st-menu {
visibility: visible;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.st-effect-12.st-menu::after {
display: none;
}
/* Effect 13: Fall down */
.st-effect-13.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.st-effect-13.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-13.st-menu {
z-index: 1;
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.st-effect-13.st-menu-open .st-effect-13.st-menu {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
transition-speed: 0.2s;
}
/* Effect 14: Delayed 3D rotate */
.st-effect-14.st-container {
-webkit-perspective: 1500px;
perspective: 1500px;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.st-effect-14 .st-pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-14.st-menu-open .st-pusher {
-webkit-transform: translate3d(300px, 0, 0);
transform: translate3d(300px, 0, 0);
}
.st-effect-14.st-menu {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg);
transform: translate3d(-100%, 0, 0) rotateY(90deg);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.st-effect-14.st-menu-open .st-effect-14.st-menu {
visibility: visible;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
padding-left: 300px;
}
</style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="st-container" class="st-container">
<nav class="st-menu st-effect-1" id="menu-1">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-2" id="menu-2">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-4" id="menu-4">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-5" id="menu-5">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-9" id="menu-9">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-10" id="menu-10">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-11" id="menu-11">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-12" id="menu-12">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-13" id="menu-13">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<div class="st-pusher">
<nav class="st-menu st-effect-3" id="menu-3">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-6" id="menu-6">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-7" id="menu-7">
<h2 class="icon icon-lab">侧边导航</h2>
<ul>
<li><a class="icon icon-data" href="#">数据管理</a></li>
<li><a class="icon icon-location" href="#">定理位置</a></li>
<li><a class="icon icon-study" href="#">学习</a></li>
<li><a class="icon icon-photo" href="#">收藏</a></li>
<li><a class="icon icon-wallet" href="#">信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-8" id="menu-8">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<nav class="st-menu st-effect-14" id="menu-14">
<h2 class="glyphicon glyphicon-home"> 侧边导航</h2>
<ul>
<li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li>
<li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li>
<li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li>
<li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li>
<li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li>
</ul>
</nav>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner">
<header class="codrops-header">
<h1>侧边导航过渡效果集<span>脱离canvas的过渡效果展示</span></h1>
</header>
<div class="main clearfix">
<div id="st-trigger-effects" class="column">
<button data-effect="st-effect-1">从顶层浮出</button>
<button data-effect="st-effect-2">反转</button>
<button data-effect="st-effect-3">推出</button>
<button data-effect="st-effect-4">侧边导航单独滑出</button>
<button data-effect="st-effect-5">侧边导航反方推出</button>
<button data-effect="st-effect-6">主页旋转式推出</button>
<button data-effect="st-effect-7">3D旋转向里展开</button>
<button data-effect="st-effect-8">3D旋转向外展开</button>
<button data-effect="st-effect-9">侧边导航缩小滑出</button>
<button data-effect="st-effect-10">侧边导航放大滑出</button>
<button data-effect="st-effect-11">主页旋转缩放，侧边导航滑出</button>
<button data-effect="st-effect-12">开门式滑出</button>
<button data-effect="st-effect-13">掉落</button>
<button data-effect="st-effect-14">带掩饰效果的旋转展开</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script src="http://www.gbtags.com/gb/networks/uploads/f2db9271-c57e-48cf-a3a3-7d37a7f2f186/js/classie.js"></script>
<script>
/*Javascript代码片段*/
var SidebarMenuEffects = (function() {
function hasParentClass( e, classname ) {
if(e === document) return false;
if( classie.has( e, classname ) ) {
return true;
}
return e.parentNode && hasParentClass( e.parentNode, classname );
}
// http://coveroverflow.com/a/11381730/989439
function mobilecheck() {
var check = false;
(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
function init() {
var container = document.getElementById( 'st-container' ),
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ),
// event type (if mobile use touch events)
eventtype = mobilecheck() ? 'touchstart' : 'click',
resetMenu = function() {
classie.remove( container, 'st-menu-open' );
},
bodyClickFn = function(evt) {
if( !hasParentClass( evt.target, 'st-menu' ) ) {
resetMenu();
document.removeEventListener( eventtype, bodyClickFn );
}
};
buttons.forEach( function( el, i ) {
var effect = el.getAttribute( 'data-effect' );
el.addEventListener( eventtype, function( ev ) {
ev.stopPropagation();
ev.preventDefault();
container.className = 'st-container'; // clear
classie.add( container, effect );
setTimeout( function() {
classie.add( container, 'st-menu-open' );
}, 25 );
document.addEventListener( eventtype, bodyClickFn );
});
} );
}
init();
})();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fac45a0f68a119fbe4d1c4c3ac3044dbd' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>