Integration of off canvas menu in WordPress

[Karkawry]

(Apologies for this repost. Accidentally went into the php forum..)

Hello all.

I’m about to embark on a WordPress site that requires an off canvas navigation menu. I am looking to create a menu that will not be Javascript dependant (If possible..) and will allow child menu`s. I have had a cursory search and not really found anything other than pay for themes that incorporate off canvas menu systems.

Can anybody here point me in the right direction for something they have maybe already integrated into WordPress themselves? Or a decent tutorial.
Many thanks
Marcus

[Designer42]

Most likely you would be looking at doing this with CSS only. You would more or less hide the menu (display:none) and then show the menu when a user ‘hovers’ over it using CSS3 transitions and display:block for your menu.

There is no pseudo class for a click so anything you do will have to be done with the :target. That said, it also depends on your cross browser support as well and your mark up. If you are targeting IE9 and above, most off canvas solutions will work. IE8 and below are going to require a lot more work. Assuming you know how your content div is placed etc.

This may be what you are looking for. You will see what is happening. In your WordPress layout you are going to have to add an additional HTML element for the indicator to control the nav show and hide. It is an HTML and CSS only solution. But it affects the browser history by adding the ‘#’ because it uses the a:target.

http://codepen.io/TimPietrusky/pen/CLIsl

Otherwise there is this solution using a checkbox and label. I have not tested on IE8 or below.
http://codepen.io/TimPietrusky/pen/CLIsl

Ultimately JS or jQuery are going to be your very best bet for what you want to accomplish IF you are targeting any older browsers like IE8 or below.

Otherwise a simple search for WordPress off canvas menu gave me this: http://wordpress.org/support/topic/adding-off-canvas-menu-to-wordpress-twentytwelve-theme

Good luck!

[Author]

Posts