Question

I’m using a CSS theme with a sidebar navigation menu. I’d like to add a button, to let users close the sidebar.

I’m familiar with jQuery toggle, show, hide, etc… and I could write the script to hide and show the div a number of ways, but is there a compliant way to do it, that will work on most browsers and phones?

Is there a better option other than show hide in jQuery?

Thanks

Answer 1

The most proper way would be to just toggle a class and to the rest with css…

var $yourSidebar = $(".sidebar");
$(document).on("click.toggleNav touch.toggleNav", ".yourTriggerButton", function(){ 
 $yourSidebar.toggleClass("open");
});

in your css, you can use media queries to make the navigation behave differently for each resolution range and even animate properly using css transitions.

This will work on almost all mobile and desktop devices.

DMEO: http://jsfiddle.net/a24fQ/