标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边栏过渡效果（Sidebar Transitions）</title>
<meta name="description" content="Sidebar Transitions: Transition effects for off-canvas views" />
<meta name="keywords" content="transition, off-canvas, navigation, effect, 3d, css3, smooth" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href = "css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/component.css">
</head>
<body>
<div id = "st-container" class="st-container">
<!--
example menus
these menus will be on top of the push wrapper
-->
<nav id = "menu-1" class="st-menu st-effect1">
<h2 class="icon icon-lab">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Date Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-2" class="st-menu st-effect2">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-4" class="st-menu st-effect4">
<h2 class="icon icon-lab">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-5" class="st-menu st-effect5">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-9" class="st-menu st-effect9">
<h2 class="icon icon-lab">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-10" class="st-menu st-effect10">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-11" class="st-menu st-effect11">
<h2 class="icon icon-lab">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-12" class="st-menu st-effect12">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-13" class="st-menu st-effect13">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<div class="st-pusher">
<!--
example menus
these menus will be under the push wrapper
-->
<nav id = "menu-3" class="st-menu st-effect3">
<h2 class="icon icon-lab">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-6" class="st-menu st-effect6">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-7" class="st-menu st-effect7">
<h2 class="icon icon-lab">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-8" class="st-menu st-effect8">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<nav id = "menu-14" class="st-menu st-effect14">
<h2 class="icon icon-stack">Sidebar</h2>
<ul>
<li><a href="#" class="icon icon-data">Data Management</a></li>
<li><a href="#" class="icon icon-location">Location</a></li>
<li><a href="#" class="icon icon-study">Study</a></li>
<li><a href="#" class="icon icon-photo">Collections</a></li>
<li><a href="#" class="icon icon-wallet">Credits</a></li>
</ul>
</nav>
<div class="st-content">
<div class="st-content-inner">
<header class="codrops-header">
边框过渡效果（Sidebar Transitions）
</header>
<div class="main clearfix">
<div class="column" id = "st-trigger-effects">
<button type="button" data-effect = "st-effect-1">效果一</button>
<button type="button" data-effect = "st-effect-2">效果二</button>
<button type="button" data-effect = "st-effect-3">效果三</button>
<button type="button" data-effect = "st-effect-4">效果四</button>
<button type="button" data-effect = "st-effect-5">效果五</button>
<button type="button" data-effect = "st-effect-6">效果六</button>
<button type="button" data-effect = "st-effect-7">效果七</button>
<button type="button" data-effect = "st-effect-8">效果八</button>
<button type="button" data-effect = "st-effect-9">效果九</button>
<button type="button" data-effect = "st-effect-10">效果十</button>
<button type="button" data-effect = "st-effect-11">效果十一</button>
<button type="button" data-effect = "st-effect-12">效果十二</button>
<button type="button" data-effect = "st-effect-13">效果十三</button>
<button type="button" data-effect = "st-effect-1">效果十四</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/classie.js"></script>
<script src="js/sidebarEffects.js"></script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/whatcanido/p/5152487.html
