Adventures in Responsive Navigation

Always Off Canvas + Touch Enabled!

This entire site actually uses the "always off canvas" method. However on this page, you can doing several things to activate the menu. You can either:

• hover over the left side of the page (on a desktop with a mouse / not a touch device)
• on most touch devices you can 'click' inside the menu (instead of hovering)
• you can swipe the gray header area to the right to open it - or to the left to close it
• when at a smaller screen size, you can click on the hamburger icon to open the menu

This is a great method to design around and has recently been gaining lots of popularity. The menu always sits off canvas - no matter what your screen size. This lets you push the limits with your design. The only caveat is that a lot of users might not know how to navigate the site if they aren't familiar with what to do! So make sure that whatever icon or wording you use - it's easy to understand.

The other negative feedback I have heard about this is that some users think that constantly having to open and close the menu could be a pain in the rear. Hmm.

The CSS:

.example-header  { width: 100%; position: relative; background-color: #f4f4f4; height: 100px; z-index: inherit; }
.e-logo { line-height:100px; }

.goingright { display: none; }
.nav-collapsed .goingleft { display: none; }
.nav-collapsed .goingright { display: inline; }