Q: Slide a div horizontally off screen http://ballsohard.co.uk/bshmfwfm/stack.html#
please click the above URL. I have a menu which has 2 different display options. clicking 'categories' will show the 2nd menu display. I am trying to create a transition where if I click one of the options, the menu will slide to the right and the new menu will slide in from the left. 
I have looked at various jQuery methods to this and have played around with some jsfiddle examples but I cannot get to grips with it.
I need some help doing this please

A: This site has great tutorials for sliding elements:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

A: set the navigation elements to postion:absolute within a position:relative container, and use .animate() to change 'left' or 'right' properties to move them off the screen.

A: I've just managed to do the same without using JQuery at all...
function hMove(element, endPos, duration) {
    // element = DOM element to move
    // endPos = element.style.left value for the element in its final position
    // duration = time in ms for the animation

//    var leftPos = element.style.left.replace(/px/,"");  // Get the current position of the element
    var leftPos = window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,"");
    var animStep = (leftPos - endPos) / (duration / 10);  // Calculate the animation step size
    var direction = ( leftPos > endPos ) ? "left" : "right";  // Are we moving left or right?

    function doAnim() {  // Main animation function

        leftPos = leftPos - animStep;  // Decrement/increment the left position value

        element.style.left = leftPos + "px";  // Apply the new left position value to the element

        // Are we done yet?
        if ((direction == "left" && leftPos <= endPos) || (direction == "right" && leftPos >= endPos)) {
            clearInterval(animLoop);  // Stop the looping
            element.style.left = endPos + "px";  // Correct for any fractional differences
        }
    } // and of main animation function

    var animLoop = setInterval(doAnim, 10); // repeat the doAnim function every 10ms to animate
}

A full working demo of this solution (with an extra toggle function to hide/show) is here: http://jsfiddle.net/47MNX/16/
It uses just straight JavaScript and should be quite flexible and adaptable.
-FM
