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

<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

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 3

I'd say take look at those links : http://css-tricks.com/off-canvas-menu-with-css-target/ or http://codepen.io/jasonhowmans/pen/dykhL

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)

Answer 5

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/