Search code examples
sliding

Top Sliding Panel to move web page content down

I want a login page that will slide down from the top of the web page. BUT I want it to move the whole website down rather than covering the page.

Anyone can refer me to a link?

Erik

Solution

  • One way to do it is to use relative positioning in your HTML so that the main content flows after the login. This means all you have to do is resize the height of the login div to push down the rest of the content:

    <div id="thePage">
  <div id="login"><!-- login stuff here --></div>
  <div id="restOfThePage"><!-- The rest of the page here --></div>
</div>

    CSS would be something like this:

    #login { height: 0; }

    Then when you wanted to show the login panel through JavaScript, you'd just do this:

    document.getElementById("login").style.height = "100px"; // for example

    Or if you wanted to animate the login panel, you could use jQuery or any number of JavaScript libraries with animation capabilities.