Minimal Drawer Sidebar Plugin with jQuery - Sidebar.js
File Size: | 11.8 KB |
---|---|
Views Total: | 2216 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Sidebar.js is an ultra-light jQuery plugin used to create a tabbed drawer sidebar that slides out from the edge of the screen on mouse hover. Great for sliding contact or feedback forms.
See also:
- jQuery Plugin To Create Sliding Drawer Panels - cabinet
- jQuery Plugin For Floating Sidebar Drawer Panel - Side Slider
- jQuery Plugin For Slide Out Tab contact - tabSlideOut
How to use it:
1. Create a drawer sidebar positioned on the right side of the browser window.
<div id="sidebar" data-position="right"> <div class="icons"> <div class="icon" data-content="content1"> <img src="img/icon.png"> </div> <div class="icon" data-content="content2"> <img src="img/icon.png"> </div> </div> <div class="contents"> <div class="content hide" data-content="content1"> <h3> Panel 1 </h3> <p> Content 1 </p> </div> <div class="content hide" data-content="content2"> <h3> Panel 2 </h3> <p> Content 2 </p> </div> </div> </div>
2. Load jQuery library and the jQuery Sidebar.js plugin at the end of the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/sidebar.js"></script>
3. Add your own CSS styles to the sidebar.
#sidebar { position: fixed; top: 40%; -webkit-transition: all 0.5s; transition: all 0.5s; } #sidebar[data-position="right"] { right: -350px; } #sidebar[data-position="right"].open { -webkit-transform: translate3d(-350px, 0, 0); transform: translate3d(-350px, 0, 0); } #sidebar[data-position="right"] .icons { float: left; } #sidebar .icons { width: 50px; float: left; } #sidebar .icons .icon { background-color: #ECF0F1; margin-bottom: 5px; } #sidebar .icons .icon:hover { background-color: #61B2A0; } #sidebar .icons .icon:last-child { margin-bottom: 0px; } #sidebar .icons .icon.active { background-color: #61B2A0; } #sidebar .icons .icon span { margin: 0.34em; color: white; font-size: 1.5em; } #sidebar .icons .icon img { width: 40px; margin: 5px; } #sidebar .contents { width: 350px; height: 450px; float: left; background-color: #61B2A0; overflow-y: auto; overflow-x: hidden; } #sidebar .contents .content { padding: 5px 25px 25px 25px; color: white; } #sidebar .contents .content.hide { display: none; } #sidebar .contents .content.show { display: block; } #sidebar .contents .content h3 { color: white; } #sidebar .contents .content ul { list-style-type: none; padding: 0; margin-top: 10px; } #sidebar .contents .content ul li { margin-bottom: 15px; } #sidebar .contents .content ul li:last-child { margin-bottom: 0px; } #sidebar .contents .content img { max-width: 100%; }
Change log:
2016-02-05
- touchscroll and in/out
This awesome jQuery plugin is developed by cooolinho. For more Advanced Usages, please check the demo page or visit the official website.