Довольно часто можно заметить на многих сайтах своеобразные кнопочки (панели), по нажатию или наведению на которые они плавно или с эффектом выплывают, отображая содержащийся в них контент. А любители jQuery даже злоупотребляют такими панелями. Не спорю, порой jQuery решает множество задач, но, в данной статье предлагаю рассмотреть наипростейший способ того, как реализовать выплывающие панели при помощи CSS, без использования каких-либо скриптов, которые будут выплывать при наведении. Это удобно, просто и не вызывает абсолютно никаких конфликтов между скриптами.
Как это работает?
Для начала добавьте разметку блока панели после открывающего тега <body> или перед закрывающим </body>.
<div class="panel">
<div class="head">
<p>Заголовок блока</p>
</div>
<div class="content">
Содержимое панели
</div>
</div>Разметка довольна простая: сам блок панели .panel, заголовок блока .head и содержимое блока .content
Теперь, всё что нам необходимо, это задать расположение панели, для этого зададим несколько простейших стилей.
.panel {
position: fixed;
left: -174px;
top: 50px;
width: 200px;
}Блоку панели мы задали фиксированную позицию, чтобы они всегда оставались в видимой области в момент прокрутки страницы. Обратите внимание, что мы также задали ширину блока, это необходимо, чтобы правильно определить на сколько необходимо сдвинуть панель, чтобы скрыть содержимое, оставив лишь заголовок в виде лычки (плашки).
Теперь зададим стили для заголовка и содержимого внутри панели.
.panel .head {
float: right;
width: 20px;
background: #ff0000;
border: 3px outset #dfdfdf;
height: 72px;
}
.panel_1 .head p {
// описанные здесь стили не обязательны, в моём случае они позволяют сделать вертикальную надпись на лычке
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-ms-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
margin: 5px 20px;
}
.panel .content {
float: left;
width: 168px;
background: #ff0000;
border: 3px inset #dfdfdf;
}Учитыва, что панель мы разместили слева, соответственно заголовок выравниваем вправо, а содержимое влево. Если же Вы желаете разместить панель справа, то измените выравнивание заголовка и содержимого наоборот. Также, мы задали несколько стилей для оформления, они не особо важны, здесь уже дело Вашей фантазии, единственное, обязательно задать ширину заголовка и контента, на основе ширины контента (за вычетом ширины заголовка) определяется позиция самой панели, чтобы скрыть содержимое.
Т.к. мы делаем простейший пример, то мы просто сделали заголовок панели в виде вертикально написанного текста, Вы же можете сделать картинку или еще каким Вам угодно образом, не важно.
Для того, чтобы содержимое панели показалось при наведении, добавьте стиль:
.panel:hover {
left: 0px;
z-index: 10;
}И на последок, чтобы панель показывалась плавно, для класса .panel дополнительно добавьте стили:
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
transition: 1s linear;Вот и всё, выплывающие панели на CSS готовы. Если Вы хотите, чтобы панель выплывала при нажатии на нее, то здесь уже не обойтись без скриптов, а это уже тема для другой статьи.
Вы также можете скачать пример работы выплывающих блоков панели по ссылке в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.