Simple Off Canvas Menu

The off canvas menu is a popular nav implementation often found on mobile sites. We’ve used the pattern on several responsive websites and have tested a few existing code snippets that we got our hands on, including the off-canvas menu included in foundation (the grid framework we use). We weren’t happy with the existing solutions that we tried out due to a number of issues ranging from unpredictable behaviour to CSS/JS bloat.

Due to a lack of confidence in the existing solutions, I decided to build my own off-canvas for our internal use. We had a couple of requirements:

1. Must work perfectly with the WordPress nav walker. Saves maintaining a custom walker.
2. Supports 2 levels, so a desktop dropdown menu can translate easily.
3. Independently scrollable. Meaning that both the nav and page (obviously) can be scrolled without affecting one another. We often have clients come to us with bloated menu requests that this is necessary for.
4. Works well with a sticky header!
5. Easily manipulated. All of our websites are unique and so the menu needs to be flexible.
6. Nice animation, clients like that!

Here’s what I came up with:

[codepen_embed height=”349″ theme_id=”0″ slug_hash=”Bftau” default_tab=”result” user=”nathanmarks”]

Playing around you’ll find the content scrolls freely and independently on the off canvas nav and the content area.

The JS is a little more than I would have liked, but I had to provide a work-around for CSS height animation. The sub-menu animations are now CSS powered, despite height:auto animation not supported currently in CSS. There is a min-height “hack” for this but it leads to undesirable behaviour.

This example can be easily configured and setup for use with media queries to provide a mobile only nav, and is extremely flexible in terms of styling. It is however important to follow structure in the pen and use a page wrap to be able to push the main content and provide a container independent of the sticky header to scroll content in.

Oh and it works perfectly with the WordPress default menu walker!