sliding menu from right to the left when the menu button is pressed

Question

When i click on the menu button, the menu should slide from right to left. The menu starts hidden and when the menu button is clicked a second time it should return to this state.

The code i have so far is this:

$(MENU_BUTTON).click(function() {
    var right = $(MENU_ID).hasClass('right');
    $(MENU_ID).toggleClass('right');
    $(MENU_ID).animate({ width:(right?0:245) }, 600);
    });

This achieves the opposite of what im trying to do because slides left to right.

Any help at all would be appreciated.

Thanks

Answer 1

@RAS

Here's an example of how you could go about it (adapt as necessary):

Fiddle Example

Uses a relatively positioned <div> with overflow:hidden to contain the menu which is an absolutely positioned <div>. It animates the right property to slide the menu in from right to left.

Hopefully it gives you some ideas on how you could achieve your result based on the markup you have to work with.

Cheers!