Make a slide down without clicking on the contents down

Question

I have an example HERE

im not sure how to make the slide down, but keeping the content at the top, like when sliding down when the div moves down.

Could you help me with this?

Answer 1

Do you mean like this?

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

If yes, use position:absolute. Thus, the position of an element does not affect the position of other elements.

EDIT: depending on what you are trying to do, it relativemight be better.

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

EDIT2: , , , . , .

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);
});

Answer 2

, , , .

http://jsfiddle.net/yGZHC/2/

, , :

<div id="open">
  <a href="#">slide</a>
</div>
<div id="holder">
  <div id="header">
    <h1>TITLE HERE</h1>
  </div>
  <div id="contact">
  </div>
</div>
<div id="slidenav">
....

slidenav , . div , show, .

$(document).ready(function() {
  $('#slidenav').animate({
    marginTop: '-480px'
  }, 200);
  $('#open a').toggle( function(){
    $('#slidenav').animate({
      marginTop: '0'
    }, 500);
  },
  function(){
    $('#slidenav').animate({
      marginTop: '-380px'
    }, 500);
  });
});