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.
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.
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
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.
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.
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
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
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