Верхняя скользящая панель для перемещения содержимого веб-страницы вниз

Question

Я хочу страницу входа, которая будет скользить вниз с верхней части веб-страницы. НО я хочу, чтобы он переместил весь сайт вниз, а не закрыл страницу.

Кто-нибудь может направить меня по ссылке?

Эрик

Answer 1

Если вы используете jQuery, тогда вам нужен метод .slideDown () .

Answer 2

Один из способов сделать это - использовать относительное позиционирование в вашем HTML, чтобы основной контент проходил после входа в систему. Это означает, что все, что вам нужно сделать, это изменить размер логина div, чтобы вытолкнуть остальную часть контента:

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

CSS будет выглядеть примерно так:

#login { height: 0; }

Тогда, когда вы захотите показать панель входа через JavaScript, вы просто сделаете это:

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

Или, если вы хотите анимировать панель входа в систему, вы можете использовать jQuery или любое количество библиотек JavaScript с возможностями анимации.