CODEWITHSUNDEEP
jquerycssslidedown
user645607
user645607

Reputation: 225

make a div slide down without pushing content down

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?

Upvotes: 5

Views: 24762

Answers (2)

James Montagne
James Montagne

Reputation: 78780

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

Upvotes: 10

Robert Greiner
Robert Greiner

Reputation: 29772

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

Upvotes: 4

Related Questions