I want to make a similar navigation menu like what m.facebook did. but this, i want to make it nicely animated slide out from left side of the website.

Flow :: Click a button > (Menu is hidden by default) Menu Slide out, push the main container to right a bit to fit the menu > Click again > Menu Slide in and hidden again.

I got no idea to make it with javascript or jquery or ajax while i'm new to web development and there are too much of effect scripting language. May i know to achieve this, which is perfect in smoothness ?

I want to make a similar navigation menu like what m.facebook. did. but this, i want to make it nicely animated slide out from left side of the website.

Flow :: Click a button > (Menu is hidden by default) Menu Slide out, push the main container to right a bit to fit the menu > Click again > Menu Slide in and hidden again.

I got no idea to make it with javascript or jquery or ajax while i'm new to web development and there are too much of effect scripting language. May i know to achieve this, which is perfect in smoothness ?

• javascript
• ajax
• jquery

Share Improve this question Follow asked Feb 28, 2012 at 7:16 1myb1myb 3,5921212 gold badges5656 silver badges7575 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Something along these lines... http://jsfiddle/HfdXY/

HTML:

<div id="menu">Menu</div>

<button id="openMenu">Toggle menu</button>​

CSS:

#menu {
    height: 300px;
    width: 0px;
    border: 1px solid black;
    display: none;
}​

JS:

$("#openMenu").click(function() {
    var menu = $("#menu");
    if ($(menu).is(":visible")) {
        $(menu).animate({width: 0}, 1000, function() {$(menu).hide();});
    } else {
        $(menu).show().animate({width: 100}, 1000);           
    }
});​