Выдвигающаяся панель, реализованная на CSS3 и jQuery

demosourse

На многих сайтах используются выдвигающиеся панели. Сегодня мы покажем как реализовать подобный функционал.

Структура

HTML структура очень проста. Мы создали элемент <header>, который при прокрутке страницы, будет прикреплён к её верхней части. В отдельном элементе <div> поместим контент, а для панели заведём отдельный блок .cd-panel. В элементе <main> поместим основной контент.

<main class="cd-main-content">
	<!-- your main content here -->
</main>

<div class="cd-panel from-right">
	<header class="cd-panel-header">
		<h1>Title Goes Here</h1>
		<a href="#0" class="cd-panel-close">Close</a>
	</header>

	<div class="cd-panel-container">
		<div class="cd-panel-content">
			<!-- your side content here -->
		</div> <!-- cd-panel-content -->
	</div> <!-- cd-panel-container -->
</div> <!-- cd-panel -->

Стили

Несколько слов о CSS коде. Во-первых, почему мы поместили панель отдельно от <header>? Это необходимо для применения трансформаций через свойство translateX. В противном случае могут возникнуть ошибки отображения.

.cd-panel {
	/*...*/
  	visibility: hidden;
	transition: visibility 0s 0.6s;
}

.cd-panel.is-visible {
	visibility: visible;
	transition: visibility 0s 0s;
}

.cd-panel-header {
	/*...*/
	position: fixed;
	top: -50px;
	width: 90%;
	height: 50px;
	transition: top 0.3s 0s;
}

.is-visible .cd-panel-header {
	top: 0;
	transition: top 0.3s 0.3s;
}

.cd-panel-container {
	/*...*/
	position: fixed;
	width: 90%;
	height: 100%;
	top: 0;
	right: 0;

	transition-property: transform;
	transition-duration: 0.3s;
	transition-delay: 0.3s;

	transform: translate3d(100%, 0, 0);
}

.is-visible .cd-panel-container {
	transform: translate3d(0, 0, 0);
	transition-delay: 0s;
}

Стоит обратить внимание на свойство transition-delay. Оно отвечает за задержку анимации, что позволяет добиться интересного визуального эффекта.

Заметка: если сменить класс в .cd-panel с .from-right на .from-left, то панель будет появляться с левой стороны.

Обработка событий

Через jQuery мы просто добавляем/удаляем класс .is-visible для отображения/скрытия панели.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/css-slide-in-panel/
Перевел: Станислав Протасевич
Урок создан: 29 Марта 2016
Просмотров: 18813
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^