Animated Toggleable Sidebar and Footer with jQuery and CSS3

Menu Bar Animation is a jQuery plugin for creating a toggle button to reveal the hidden sidebar and footer with subtle CSS3 animations. A little similar to the off-canvas toggle menu plugins which allows you to create a mobile-friendly & space-saving navigation for your website.

How to use it:

1. Include the required menuBar.css into the head section of the document.

<link href="menuBar.css" rel="stylesheet" type="text/css">

2. Include jQuery javascript library and the menuBar.js at the bottom of the document.

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

3. Create the sidebar and footer for your website.

<nav class="sidebar"> <a class="menu cursor" title="Menu">
<div class="menu-trigger">
<div class="bar-container">
<div class="bar menu-bar-top"></div>
<div class="bar menu-bar-mid"></div>
<div class="bar menu-bar-bottom"></div>
</div>
</div>
</a> YOUR SIDEBAR CONTENT GOES HERE </nav>
<div id="fade-wrapper"></div>

<footer class="hidden"> YOUR FOOTER CONTENT GOES HERE </footer>

4. Initialize the plugin with default settings.

<script type="text/javascript">
$(document).ready(function(){
$('a.menu').menuBar();
});
</script>

5. Optional settings.

<script type="text/javascript">
$(document).ready(function(){
$('a.menu').menuBar({
width: 145, // Width of Sidebar
left: true, // If true, sidebar is positioned left. If false, it's positioned right
height: 80, // Height of footer
barColor: '#000', // Color of three-bar menu before it's opened
menuBackground: '#303030', // Background color of sidebar and footer
closeColor: '#fff' // Color of close-button
});
});
</script>

---

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