Toggle Sidebar Feature

Although the demand for a 1024px (or less) solution for this blog has been next to none, it’s a feature that I’ve kept in mind since the launch of the new layout. So today I’m happy to announce the solution I’ve chosen, the ability to toggle the sidebar. The button is located in the page navigation, floated to the right and I’ve tested the feature in FF 3.5+ (OS X & Windows), Safari 4, Opera 9.64 and IE8.

The feature is built with jQuery and although it took me some time to get it working, it’s a pretty easy script.

<script type="text/javascript">
$(document).ready(function() {
$("#container").width("1200px");
$("#menu").show();

$(".togglemenu").click(function(){

if ($("#menu").is(":visible")) {
$("#menu").hide();
$("#container").animate({width:"900px"});
$(this).addClass("active");
$.cookie('side-menu', 'hiding', {path: "/"});
return false;
} else {
$("#container").animate({width:"1200px"});
$("#menu").delay(300).fadeIn(1000);
$(this).removeClass("active");
$.cookie('side-menu', 'showing', {path: "/"});
return false;
}
});

var sidemenu = $.cookie('side-menu');

if (sidemenu == 'hiding') {
$("#menu").hide();
$("#container").width("900px");
$(".togglemenu").addClass("active");
};
})

;
</script>

Rather than simulating a delay function I’m using this plugin, mainly because it’s easier to understand the code that way (’cause I’m a noob). I’m also using this cookie plugin so you don’t have to click on the toggle button on every refresh^^

Well, I hope you’ll enjoy this, and as always, let me know what you think!

Related posts:

1. Welcome to the New yonasu.com!
2. A New Sidebar

Tagged as: browser, code, cookie, delay, feature, firefox, fix, function, ie8, javascript, jQuery, layout, opera, plugin, safari, sidebar, solution, support, toggle