Multi Level Off canvas nav with only CSS

[mjames1980]

I’m a bit new to the more advanced aspects of CSS and am trying to build a multi-level off canvas nav structure for a site I’m working on. I’ve gotten pretty far using Chris’s tutorial on this site, but I’ve hit a few road blocks. First, I’d like the page wrapper to stay slid to the right when activating sub menus instead of sliding back under the nav. Second, I’d like the sub menus to retract and reveal the main menu, rather than retreating entirely. Any advice would be great, I’m trying to do this all with CSS and no JS, if possible. Thanks. Here’s the link to CodePen. It’s not really styled, I’m just trying to get the functionality to work first.
http://codepen.io/mjames1980/pen/EjYOmp

[Beverleyh]

There’s a couple here for you to go at: http://fofwebdesign.co.uk/freebies-for-websites.php?sort=menu

If you want the off-canvass/hamburger combo at all times (on desktop and mobile), the bottom one would be the one to go for.

But if you want a more traditional dropdown/flyout on desktop, the three at the top offer few different variations.

Hope they help

[mjames1980]

These are very nice and a great resource. I was hoping that someone might be able to offer some insight to my question given the provided pen. I’d love to know what I need to add to accomplish the subtle changes I was hoping for. Thank you for the response.

[Author]

Posts