How do i show and hide my menu like this?

JavaScript
1

I want to be able to show and hide my menu like on this site: http://etchapps.com/

Anyone know how to do this?

thanks in rewards.

2

simple animate() on the width of the menu div and use CSS3 rotate to turn the box.

Not tested but should give you a starting block.


//menu btn is the trigger
$("#menu_btn").click(function() {
        $('#menu_btn').css({
            '-moz-transform':'rotate(88deg)',
             '-webkit-transform':'rotate(88deg)',
             '-o-transform':'rotate(88deg)',
             '-ms-transform':'rotate(88deg)'
        });
    
        $('.menu_div').animate({width: 'toggle'}, 500,
            function() {
                // Animation complete.
                  
              });
        });
3

Thanks that got me started=) But atm it looks like this, check out the fiddle:

It animates the wrong way and as u can see the menu items “drop down under each other” at the end of the animation. And the trigger stays rotated and doesnt rotate back.

I would be very grateful if you or someone else could fix this for me as im a total noob to javascript.

thanks in advance

4

added overflow: hidden and some height to the parent div so now it looks like this: http://jsfiddle.net/Ymu8T/21/

But still animating to the left and i the trigger is not rotating more then the first time its clicked.

5

I have updated your fiddle… :slight_smile:

6

thanks

I float the ul li left now and now i got some issue with the menu jumping like 30px to the right before the animation, u know why?

7

Now i think i got pretty much what i want … except that i want to have the trigger on the other side, and to the animation to animate the other way, how do i do that?

8

Try http://jsfiddle.net/Ymu8T/47/

9

Thanks now its working as i want it to!

Now on the other hand i would like to customize a bit more, i want the menu to “collapse” into the trigger on a certain page width (767px) , so that on 767px and under it only shows the menu when clicked.