Simple jQuery & CSS3 Based Off-canvas Sidebar Navigation
File Size: | 36.1 KB |
---|---|
Views Total: | 6308 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A super simple jQuery script to create an Off-canvas sidebar menu for navigation. The navigation will slide out from the left side of the page with a smooth CSS3 transition effect once you click the toggle button.
How to use it:
1. Include the required jQuery library directly from a CDN.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Create a button to toggle the off-canvas navigation.
<div id="menu-toggle"> <img src="menu.png" width=20 height=20 alt="Menu"></img> </div>
3. Create a menu using Html unordered list.
<nav id="menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Login</a> <a href="#">A Link</a> <a href="#">Another Link</a> </nav>
4. The CSS to style the menu.
#menu { transition: all 0.3s ease; position: fixed; width: 0%; top: 0; left: -200px; background: rgb(0, 0, 0); height: 100%; z-index: 999; box-shadow: 0px 0px 10px black; } #menu a { color: white; display: block; text-align: center; text-decoration: none; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; border-radius: 100px; transition: all 0.2s ease; } #menu a:hover { background: rgb(50, 50, 50); } #menu-toggle { position: fixed; top: 20px; left: 0; background: rgb(0, 100, 100); z-index: 1000; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; transition: all 0.3s ease; } #menu-toggle:hover { cursor: pointer; } #menu.open { left: 0; width: 200px; display: block; } #menu-toggle.open { left: 200px; }
5. The javascript to enable the navigation.
$(document).ready(function () { $('#menu-toggle').click(function(){ if($('#menu').hasClass('open')){ $('#menu').removeClass('open'); $('#menu-toggle').removeClass('open'); }else{ $('#menu').addClass('open'); $('#menu-toggle').addClass('open'); } }); });
This awesome jQuery plugin is developed by minizatic. For more Advanced Usages, please check the demo page or visit the official website.