We can create a slidebar menu using jquery slidebar plugin. It is a jQuery plugin that gives a slidebar menu for easily implementing in the web pages.
We have to include slidebars.js in our source files.
Here is an example that shows how to implement this plugin:
<!doctype html>
<html>
<head>
<title>Slidebars Menu</title>
<meta name = "viewport" content = "width = device-width,
initial-scale = 1.0, minimum-scale = 1.0,
maximum-scale = 1.0, user-scalable = no">
<link rel = "stylesheet" href = "slidebars.css">
<link rel = "stylesheet" href = "example-styles.css">
</head>
<body>
<div id = "sb-site">
<ul>
<li class = "sb-toggle-left">Click here to slide menu</li>
</ul>
</div>
<div class = "sb-slidebar sb-left sb-style-push">
<p>1</p>
<hr/>
<p>2</p>
<hr/>
<p>3</p>
<hr/>
<p>4</p>
<hr/>
</div>
<script
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "slidebars.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>
0 Comment(s)