« Back to main

Create basic off-canvas sidebar panel (left and right)

View demo Download

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

Creating e-commerce project?