Доброго времени суток 🙂
Сегодня продолжу писать статьи на тему создания разного рода панелей с анимацией. В этой статье речь пойдет о том как сделать выезжающею панель сверху с помощью 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:. Писать тот же код с заменой парі параметров не буду. думаю Вы справитесь с этой задачей.
На этом все, спасибо за внимание. 🙂