Create basic off-canvas sidebar panel (left and right)
Today many websites using off-canvas sidebars for mobile and desktop view, some of them using push-screen animations. In this example we will show basic jquery code and css styling which creates offcanvas sidebar with screen dimmer (darken rest screen when offcanvas is active).
With following script you can use turn any element into off-canvas. It is for all screen sizes. All you need to add a single class name and unique id.
Steps to make desktop off-canvas sidebar
- Crate div element with some content inside
- Add class name
offcanvas, and write following CSS styling
- Add another element with class name
screen-overlay, to overlay screen with dark transparent background
- Write jquery script with
toggleClass("show")to show or hide our off-canvas panel
- Also add another
toggleClass("show")to screen-overlay element.
Here are basic code snippets
« Back to all examples