examples/animation-styles.html
<!doctype html>
<html>
<head>
<title>Slidebars Animation Styles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Slidebars CSS -->
<link rel="stylesheet" href="slidebars/slidebars.css">
<!-- Example Styles -->
<link rel="stylesheet" href="example-styles.css">
</head>
<body>
<div id="sb-site">
<h1>Slidebars Animation Styles</h1>
<p>The standard animation is to reveal Slidebars, however you can add modifier classes to change this. In this example, the left Slidebar has class '.sb-style-push' which makes the Slidebar push the site across. The right Slidebar has class '.sb-style-overlay', which makes the Slidebar slide over the site without moving it.</p>
<ul>
<li class="sb-toggle-left">Toggle left Slidebar</li>
<li class="sb-toggle-right">Toggle right Slidebar</li>
<li class="sb-open-left">Open left Slidebar</li>
<li class="sb-open-right">Open right Slidebar</li>
<li class="sb-close">Close either Slidebar</li>
</ul>
<h2>More Examples</h2>
<ul>
<li><a href="control-classes.html">Control Classes</a></li>
<li><a href="api-usage.html">API Usage</a></li>
<li><a href="mobile-only.html">Mobile Only</a></li>
<li><a href="animation-styles.html">Animation Styles</a></li>
<li><a href="optional-widths.html">Optional Widths</a></li>
<li><a href="custom-widths.html">Custom Widths</a></li>
<li><a href="scroll-lock.html">Scroll Lock</a></li>
<li><a href="slidebar-links.html">Slidebar Links</a></li>
<li><a href="static-slidebars.html">Static Slidebars</a></li>
<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
</ul>
</div>
<div class="sb-slidebar sb-left sb-style-push">
<!-- Your left Slidebar content. -->
<p>Just a line of text to demonstrate the push effect.</p>
</div>
<div class="sb-slidebar sb-right sb-style-overlay">
<!-- Your right Slidebar content. -->
<p>Just a line of text to demonstrate the overlay effect.</p>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Slidebars -->
<script src="slidebars/slidebars.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>