Выплывающие панели на CSS

Довольно часто можно заметить на многих сайтах своеобразные кнопочки (панели), по нажатию или наведению на которые они плавно или с эффектом выплывают, отображая содержащийся в них контент. А любители jQuery даже злоупотребляют такими панелями. Не спорю, порой jQuery решает множество задач, но, в данной статье предлагаю рассмотреть наипростейший способ того, как реализовать выплывающие панели при помощи CSS, без использования каких-либо скриптов, которые будут выплывать при наведении. Это удобно, просто и не вызывает абсолютно никаких конфликтов между скриптами.

Как это работает?

Для начала добавьте разметку блока панели после открывающего тега <body> или перед закрывающим </body>.

Разметка довольна простая: сам блок панели .panel, заголовок блока .head и содержимое блока .content

Теперь, всё что нам необходимо, это задать расположение панели, для этого зададим несколько простейших стилей.

Блоку панели мы задали фиксированную позицию, чтобы они всегда оставались в видимой области в момент прокрутки страницы. Обратите внимание, что мы также задали ширину блока, это необходимо, чтобы правильно определить на сколько необходимо сдвинуть панель, чтобы скрыть содержимое, оставив лишь заголовок в виде лычки (плашки).

Теперь зададим стили для заголовка и содержимого внутри панели.

Учитыва, что панель мы разместили слева, соответственно заголовок выравниваем вправо, а содержимое влево. Если же Вы желаете разместить панель справа, то измените выравнивание заголовка и содержимого наоборот. Также, мы задали несколько стилей для оформления, они не особо важны, здесь уже дело Вашей фантазии, единственное, обязательно задать ширину заголовка и контента, на основе ширины контента (за вычетом ширины заголовка) определяется позиция самой панели, чтобы скрыть содержимое.

Т.к. мы делаем простейший пример, то мы просто сделали заголовок панели в виде вертикально написанного текста, Вы же можете сделать картинку или еще каким Вам угодно образом, не важно.

Для того, чтобы содержимое панели показалось при наведении, добавьте стиль:

И на последок, чтобы панель показывалась плавно, для класса .panel дополнительно добавьте стили:

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

Вы также можете скачать пример работы выплывающих блоков панели по ссылке в конце статьи.

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
5,00 / 5 баллов
1 участников
Комментарии

Здесь еще никто не оставлял комментарии.

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

* - поля обязательные для заполнения. E-mail не публикуется.