Довольно часто можно заметить на многих сайтах своеобразные кнопочки (панели), по нажатию или наведению на которые они плавно или с эффектом выплывают, отображая содержащийся в них контент. А любители jQuery даже злоупотребляют такими панелями. Не спорю, порой jQuery решает множество задач, но, в данной статье предлагаю рассмотреть наипростейший способ того, как реализовать выплывающие панели при помощи CSS, без использования каких-либо скриптов, которые будут выплывать при наведении. Это удобно, просто и не вызывает абсолютно никаких конфликтов между скриптами.
Как это работает?
Для начала добавьте разметку блока панели после открывающего тега <body> или перед закрывающим </body>.
|
1 2 3 4 5 6 7 8 |
<div class="panel"> <div class="head"> <p>Заголовок блока</p> </div> <div class="content"> Содержимое панели </div> </div> |
Разметка довольна простая: сам блок панели .panel, заголовок блока .head и содержимое блока .content
Теперь, всё что нам необходимо, это задать расположение панели, для этого зададим несколько простейших стилей.
|
1 2 3 4 5 6 |
.panel { position: fixed; left: -174px; top: 50px; width: 200px; } |
Блоку панели мы задали фиксированную позицию, чтобы они всегда оставались в видимой области в момент прокрутки страницы. Обратите внимание, что мы также задали ширину блока, это необходимо, чтобы правильно определить на сколько необходимо сдвинуть панель, чтобы скрыть содержимое, оставив лишь заголовок в виде лычки (плашки).
Теперь зададим стили для заголовка и содержимого внутри панели.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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; } |
Учитыва, что панель мы разместили слева, соответственно заголовок выравниваем вправо, а содержимое влево. Если же Вы желаете разместить панель справа, то измените выравнивание заголовка и содержимого наоборот. Также, мы задали несколько стилей для оформления, они не особо важны, здесь уже дело Вашей фантазии, единственное, обязательно задать ширину заголовка и контента, на основе ширины контента (за вычетом ширины заголовка) определяется позиция самой панели, чтобы скрыть содержимое.
Т.к. мы делаем простейший пример, то мы просто сделали заголовок панели в виде вертикально написанного текста, Вы же можете сделать картинку или еще каким Вам угодно образом, не важно.
Для того, чтобы содержимое панели показалось при наведении, добавьте стиль:
|
1 2 3 4 |
.panel:hover { left: 0px; z-index: 10; } |
И на последок, чтобы панель показывалась плавно, для класса .panel дополнительно добавьте стили:
|
1 2 3 4 |
-webkit-transition: 1s linear; -moz-transition: 1s linear; -o-transition: 1s linear; transition: 1s linear; |
Вот и всё, выплывающие панели на CSS готовы. Если Вы хотите, чтобы панель выплывала при нажатии на нее, то здесь уже не обойтись без скриптов, а это уже тема для другой статьи.
Вы также можете скачать пример работы выплывающих блоков панели по ссылке в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.