X
Заказать услугу

Выезжающая панель сверху с помощью CSS

Плагины и Шаблоны для Wordpress
  • 2019-05-26
  • 3988 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток 🙂

Сегодня продолжу писать статьи на тему создания разного рода панелей с анимацией. В этой статье речь пойдет о том как сделать выезжающею панель сверху с помощью CSS. Данная панель может Вам пригодится при организации меню, блока с разной информацией, инструментов для входа на сайт и так далее.

Выезжающая сверху панель

Лично я несколько раз использовал подобную методику. Благодаря использованию CSS, данный метод является не сложным и понятным. Пример того что получится можно посмотреть ниже.



Пример

Давайте потихоньку приступать к выполнению задуманного, тем более что работы не особо много, чтобы долго растягивать писанину. Первым делом добавим нашу HTML разметку. Разметка простенькая минимальная для того, что бы было понятно. Имеет два блока родительский и дочерний. По сути родительский это кнопка для наведения а дочерний сама панель на которой Вы будете размещать разного рода информацию.

<div id="sl_tp">
  <span>Наведи на меня</span>
  <div id="sl_in">
Место для любой информации, которую хотите разместить.
  </div>
</div>

Чтобы запустить нашу анимацию выезжающей панели, добавляем стили. Сделать это нужно, например, в конце вашего файла стилей. Который размещен в папке с вашим сайтом. В зависимости от того, какая у вас система или самописный сайт, файл стилей может лежать в разных папках и называться по разному. Чаще всего он носит название - style.php.

#sl_tp{
position: fixed;
top:0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #f60;
width:100%;
height:40px;
box-shadow:0 0 5px #777;
text-align:center;
color:#fff;
}

#sl_in {
position: fixed;
min-height:200px;
top:-200px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
background: #313131;
width:100%;
padding:10px;
box-sizing:padding-box;
}
#sl_tp:hover {
top: 200px;
}
#sl_tp:hover #sl_in {
top:0;
}

Вот и вся панель. Стили меняем под себя, настраиваем и добавляем в дочерний блок в разметке свою информацию. В стилях можно настроить время появления. Оно задается параметром - transition. В данном примере время появления равно 0.3 секунды. Можете поменять под себя.

Также можете по желанию, поменять расположение панели и переместить ее вниз. Для этого нужно в коде со стилями, все параметры - top: заменить на bottom:. Писать тот же код с заменой парі параметров не буду. думаю Вы справитесь с этой задачей.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 8, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.