make a div slide down without pushing content down

Question

i have an exampe HERE

im not sure how to make the div slide down but keeping the content at the top, as in not slide down when the div slides down.

could you possibly help me with this?

Answer 1

Do you mean sort of like this?

http://jsfiddle.net/yGZHC/3/

If so, use position:absolute. This way the position of the element does not affect the position of other elements.

EDIT: Depending on what you're trying to do, relative may be better.

http://jsfiddle.net/yGZHC/5/

EDIT2: And even better than that, use the height dynamically to determine how far to move the content. This way you're not constrained to a fixed height.

http://jsfiddle.net/yGZHC/7/

$('#slidenav').animate({
    top: '-'+$(this).height()
}, 200);

$('#open a').toggle(
    function(){
        $('#slidenav').animate({
            top: '0'
        }, 500);
    },
    function(){
        $('#slidenav').animate({
            top: '-4'+$(this).height()
        }, 500);
});