jqueryjquery-animateslidetoggleclass

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


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


Solution

  • @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!