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 the tab to say something like More, then when the menu is visible, I want the tab to say hide.

So i have a couple questions... How can I make the menu, which is essentially just a div, slide out from outside the screen on click, while also having the text on the tab change and the a href destination change so that when the slide function is complete, the tab will say hide, and when clicking it, it will send the div back out of the screen.

If you have the facebook app on your phone, I basically want to replicate that on my desktop website.

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');
        });
    }
);

<div id="popout">
    <div id="toggle">Show</div>
    <br style="clear: both" />
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>        
    </ul>
</div>

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

Answer 2

Jquery .toggle and .animate will work as noted by mrtsherman. I would suggest using z-index and tweaking the css a bit more. Checkout this for an example - http://jsfiddle.net/codefuze/HYjEB/1/

Answer 3

Why not simply using CSS3 Transitions instead?

It's pretty simple and meanwhile fully supported by Internet Explorer (10) too.

Here is a nice tutorial: Using CSS transitions

And a nice example of such a menu: Slide and push menu

Answer 4

If you're looking for a more pre-packaged solution, Bootstrap offers a nice slide menu as well.

See the following 'offcanvas' example: http://getbootstrap.com/examples/offcanvas/ (you'll need to shrink your screen down to mobile size to see the 'Toggle nav' in action)