How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

Question

I am making a website and have a vertical list of buttons along the left side of the site. I want to hide them in the side so only a tab show. When the menu is hidden, I want th

Answer 1

This is pretty straightforward using jQuery. These are the steps you should take.

1. Fix the popout to one side of the screen using fixed positioning
2. Add a clickable area that user triggers the slide in/out effect with
3. Create a jQuery animation to slide the content on/off via negative margins
4. In the animation callback change how you want the trigger displayed (show/hide)

Important - toggle event is deprecated in jQuery 1.8 and removed in 1.9. My original answer will no longer work. This new version will work in both older and newer version of jQuery. This method uses a click handler and a class called hidden to determine whether the popout should be animated on/off the screen.

http://jsfiddle.net/tzDjA/

jQuery

//when the trigger is clicked we check to see if the popout is currently hidden
//based on the hidden we choose the correct animation
$('#trigger').click( function() {
    if ($('#popout').hasClass('hidden')) {
        $('#popout').removeClass('hidden');
        showPopout();
    }
    else {
        $('#popout').addClass('hidden');
        hidePopout();
    }
});

function showPopout() {
    $('#popout').animate({
        left: 0
    }, 'slow', function () {
        $('#trigger span').html('Close');  //change the trigger text at end of animation
    });
}

function hidePopout() {
    $('#popout').animate({
        left: -40
    }, 'slow', function () {
        $('#trigger span').html('Show');  //change the trigger text at end of animation
    });
}

CSS

/* minimal CSS */
 #popout {
    position: fixed;                /* fix the popout to the left side of the screen */
    top: 50px;
    left: -40px;                    /* use a negative margin to pull the icon area of the popout off the edge of the page */
    width: 75px;
    border: 1px dotted gray;
    color: gray;
}
#trigger {                          /* create a clickable area that triggers the slide in/out effect */
    position: absolute;             /* position clickable area to consume entire right section of popout (add a border if you want to see for yourself) */  
    top: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;   
}

Original Answer (does not work as of jQuery 1.9)

http://jsfiddle.net/WMGXr/1/

$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('Close');
        });
    }, 
    function() {
        $('#popout').animate({ left: -40 }, 'slow', function() {
            $('#toggle').html('Show');
        });
    }
);


    
Show
    

    

        
a
        
b
        
c
        
d
        
    


#popout { position: fixed; height: 100px; width: 75px; border: 1px dotted gray; background: darkblue; color: white; top:50px; left: -40px; }
#toggle { float: right; }