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

Довольно часто можно заметить на многих сайтах своеобразные кнопочки (панели), по нажатию или наведению на которые они плавно или с эффектом выплывают, отображая содержащийся в них контент. А любители 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;

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

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

Демо


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
1 Комментарии | Добавить свои