jQuery Animated Side Navigation Menu Plugin - Sidebar

Sidebar is a jQuery plugin for creating a side navigation menu that slides out from the left side of your page when clicking the toggle button. The main content of the page will be pushed to the right with a smooth animation while the side navigation is opened, similar to the ''Push Menu" jQuery plugins.

Basic Usage:

1. Include jQuery sidebar's stylesheet file in the head section of your page.

<link rel="stylesheet" href="css/sidebar.css" />

2. Create a link to toggle the side navigation.

<a href="#" class="jsc-sidebar-trigger"></a>

3. Create a side navigation menu.

<nav class="jsc-sidebar" id="side-nav">
<ul>
<li><a href="#" class="current">Download</a></li>
<li><a href="https://www.jqueryscript.net">Back to article</a></li>
<li><a href="https://www.jqueryscript.net">More jQuery Plugins</a></li>
</ul>
</nav>

4. Create a section or div with class of 'main-content' for your main content.

<section class="main-content">
Your content goes here
</section>

5. Include the jQuery javascript library and jQuery sidebar's script file on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/sidebar.js"></script> 

6. Call the plugin.

<script>
$('#side-nav').sidebar({
trigger: '.jsc-sidebar-trigger',
});
</script>

Change log:

v0.1.0 (2014-01-26)

• update

---

This awesome jQuery plugin is developed by makotot. For more Advanced Usages, please check the demo page or visit the official website.