Search code examples
jqueryhtmlcsssidebarsliding

jQuery - Sidebar that slides in, and keep the window width

I've been trying to figure this out but I've not managed yet.. So I'm asking you for help!

What I want to do is: when the user clicks a button a sidebar is either shown or hidden. The content should follow, slide the same direction as the sidebar, and the user should not be able to see the y overflow.

This is basically what I want to do: http://mikedidthis-pierre.tumblr.com/

Thanks in advance! Cheers

Solution

  • Create a button that will toggle the menu:

    var menuEnabled = false;

$("button").click(function() {
    if (menuEnabled) {
        $("#left").css("display", "none");
        $("#content").css("margin-left", "0");
        menuEnabled = false;
    } else {
        $("#left").css("display", "block");
        $("#content").css("margin-left", "200px");
        menuEnabled = true;
    }
});

    Full Demo here: http://jsfiddle.net/YwRSb/4/