examples/slidebar-links.html
<!doctype html>
<html>
<head>
<title>Slidebar Links Example</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>Slidebar Links Example</h1>
<p>As of version 0.10, Slidebars no longer changes the default behaviour of links. If you want a link to close the Slidebar before following the link, you must add class '.sb-close' to the a, or the parent containing the a.</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">
<ul>
<li><a href="#">Normal Link</a></li>
<li><a href="#">Normal Link</a></li>
<li><a href="#">Normal Link</a></li>
<li><a href="#">Normal Link</a></li>
<li><a href="#" class="sb-close">Close Enabled Link</a></li>
</ul>
</div>
<div class="sb-slidebar sb-right">
<ul>
<li><a href="#">Normal Link</a></li>
<li><a href="#">Normal Link</a></li>
<li><a href="#">Normal Link</a></li>
<li><a href="#">Normal Link</a></li>
<li class="sb-close"><a href="#">Close Enabled Parent</a></li>
</ul>
</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>