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?

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

Solution 2

I fixed it to what I think you are asking for.

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

First thing's first, move the content below the stuff you want to be on top:

<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">
....

Then, just bump your slidenav up some more to compensate. You could even hide the div completely until the show button is clicked if you want.

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

Comments

[user645607]

i have a question for you, when i use position:absolute it makes the div not centered anymore. how would i fix that?

[James Montagne]

you can use left to define how far from the left the element is. e.g. left: 50px;