Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Integration of off canvas menu in WordPress Reply To: Integration of off canvas menu in WordPress

#151811
Designer42
Participant

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!