{"id":5225,"date":"2013-04-29T07:00:36","date_gmt":"2013-04-29T07:00:36","guid":{"rendered":"http:\/\/www.adviceinteractivegroup.com\/?p=5225"},"modified":"2013-04-29T07:00:36","modified_gmt":"2013-04-29T07:00:36","slug":"going-off-canvas-for-mobile-is-easier-then-you-think","status":"publish","type":"post","link":"https:\/\/www.advicelocal.com\/blog\/going-off-canvas-for-mobile-is-easier-then-you-think\/","title":{"rendered":"Going Off-Canvas for Mobile is Easier Than You Think"},"content":{"rendered":"

Disclaimer: This tutorial assumes you have intermediate knowledge of HTML5 and CSS3 and beginner knowledge of jQuery\/Javascript.<\/p>\n

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<\/a> source or download the files to follow along.<\/p>\n

The HTML5<\/h2>\n

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.<\/p>\n

The Javascript<\/h2>\n

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<\/p>\n

The CSS<\/h2>\n

Desktop (Default)<\/h4>\n

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<\/a> 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.<\/p>\n

Tablet<\/h4>\n

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<\/a>.<\/p>\n

Inside our tablet media query we have a few important items.<\/p>\n