Skip to content

Instantly share code, notes, and snippets.

@dvdpearson

dvdpearson/gist:5594290

Created May 16, 2013 19:16
Show Gist options
  • Save dvdpearson/5594290 to your computer and use it in GitHub Desktop.
Save dvdpearson/5594290 to your computer and use it in GitHub Desktop.
Download ZIP
Sidr - The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive - http://www.berriart.com/sidr/
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<!-- Your stuff -->
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body>
<!-- Your stuff -->
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>
Raw
gistfile2.html
The Simplest Usage
<a id="simple-menu" href="#sidr">Toogle menu</a>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
Raw
gistfile3.html
Create Multiple Menus
<a id="left-menu" href="#left-menu">Left Menu</a>
<a id="right-menu" href="#right-menu">Right Menu</a>
<script>
$(document).ready(function() {
$('#left-menu').sidr({
name: 'sidr-left',
side: 'left' // By default
});
$('#right-menu').sidr({
name: 'sidr-right',
side: 'right'
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment