Home » Blog » Going Off-Canvas for Mobile is Easier Than You Think

Going Off-Canvas for Mobile is Easier Than You Think

Posted on by Bernadette Coleman

Disclaimer: This tutorial assumes you have intermediate knowledge of HTML5 and CSS3 and beginner knowledge of jQuery/Javascript.

In this tutorial we will be creating a basic design with a content area and a sidebar then using CSS3 for media queries to move the sidebar off-canvas for mobile. View the demo source or download the files to follow along.

The HTML5

I won’t go into much detail here since we will be doing most of the work with CSS3. The demo has some basic containers – #header, #content, #sidebar, and #footer – as well as a button with an id of “toggle-sidebar”. There is also some dummy information you might see in the wild. The sidebar has buttons for navigate to different categories.

The Javascript

Most of the work is done in CSS. The jQuery simply toggles the class “sidebar-active” on the body when the #toggle-sidebar button is clicked

The CSS

Desktop (Default)

Nothing fancy here. With padding the content is 80% wide (floated left) and the sidebar is 20% wide (floated right). The CSS3 transitions are used for animation later on. If you aren’t familiar with CSS3 transitions css3.info has a good explaination. The #toggle-sidebar button has a value of “display:none;” since we don’t want it visible for desktops. Lastly, the #content and #sidebar divs are inside a larger #wrap div that has “overflow:hidden;”. This is to prevent scroll bars that come with the default overflow auto.

Tablet

We will be using a media query with min-width of 501px and max-width of 1024px for tablet styles. This means our desktop view will show for screens larger then 1024px or browsers that don’t support media queries – like older versions of Internet Explorer. If you need some more info on CSS3 media queries there is a really good article on css-tricks.com.

Inside our tablet media query we have a few important items.

  • A lot of the default css is still in tact for the #content and #sidebar – like floats and CSS3 transitions
  • Our #toggle-sidebar button has “display:inline-block;” so that it is visible on tablet
  • The #content (with padding) has 100% width.
  • The #sidebar (with padding) has a width of 70%
  • The #sidebar has a right margin of 100%. This is what takes it off-canvas, rather than just breaking below the #content.
  • .sidebar-active #content has a left margin of -70%. When the sidebar is active the content will move off-canvas using negative left-margin. The 70% is to match the #sidebar width. This will leave part of the content visible on tablets for a nice effect.
  • .sidebar-active #sidebar has a right margin of 0 when the sidebar is active removing the negative right-margin will bring it back into view.

Mobile

We will be using a media query with max-width of 500px for mobile styles since the tablet styles start at 501px.

Inside our mobile media query we are doing almost the same thing as tablet.

  • Our #toggle-sidebar button is visible
  • The #content and #sidebar (with padding) have 100% width since there isn’t a lot of room to work with on mobile.
  • .sidebar-active #content has a left margin of -100% to match the sidebar width.
  • .sidebar-active #sidebar has a right margin of 0, just like the tablet design

Extras

There is some button styling with CSS3 and a few other things in the demo that weren’t covered in this tutorial since they aren’t required for the functionality. If you haven’t looked at all the new elements CSS3 has to offer I highly suggest checking them out

Conclusion

We were able to easily create an off-canvas sidebar for tablet/mobile with a minimal amount of code. There are CSS grid frameworks and other responsive packages out there – which are great for more complex projects – but hopefully you now have a better understanding of how off-canvas works and can use it in your next project.

Having trouble or have a question? Leave a comment and let me know