A stupid simple sidebar jQuery plugin.
Four Sidebar Options:
- Top Sidebar
- Bottom Sidebar
- Left Sidebar
- Right Sidebar
Best jQuery Side Menu Plugins & Tutorials with Demo
scotchPanels.js : jQuery Off Canvas Menus and Panels Plugin
scotchPanels.js is a jQuery plugin for easily creating off canvas menus, navigations, and other panel types such as images, videos, and iframes. Scotch Panels are featured-packed and have a ton of different options for every skill-level to tweak and implement into almost any project.
Features:
- Uses CSS3 with JavaScript Fallback
- Fully Responsive
- Custom transition styles
- Completely Customizable with tons of optional settings
- Lightweight, easy to use, and only one file
- Cross Browser Support
- Choose either custom HTML, images, iframes, or video panels
- Optionally use HTM5 Data Attributes
- Off Canvas directions from top, Bottom, left, and right
- Works from any container or div
- Extensive Callbacks API
- Click, touch, hover, and keyboard helpers
- CSS Class Helpers
Pure Drawer : Pure CSS Off-Canvas drawers Menu
You have probably all seen the “drawer menu/off-canvas” navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required.
- 9 Cool Effects
- Different Drawer Position
- Responsive Design
- Cross browser support
- Multiple Drawers on single page
- No javascript
Off-Canvas Menu Effects with CSS3 & SVG
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.Today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.
Responsive Off Canvas Menu with CSS3 & jQuery
In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.
Pushy : jQuery Off-Canvas Navigation Menu
Pushy is a jquery responsive off-canvas navigation menu using CSS transforms & transitions.
Features:
- Uses CSS transforms & transitions.
- Smooth performance on mobile devices.
- jQuery animation fallback for IE 7 – 9.
- Menu closes when a link is selected.
- Menu closes when the site overlay is selected.
- It’s responsive!
