Главная » CSS HTML » CSS: Выдвижная боковая панель

CSS: Выдвижная боковая панель

В данной статье приведен пример реализации выдвижной панели для сайта. Панель может выдвигаться как слева, так и справа (соответствующий код приведен в комментариях). 

HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Rectactable side bar</title>
</head>
<body>
	<input type="checkbox" id="checkbox" />
	<div class="panel">
		<label class="panel-btn-close" for="checkbox">+</label>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequuntur tenetur reprehenderit magni voluptatem minus aut, ullam repellendus vitae, eveniet provident facere cupiditate corporis. Praesentium dignissimos dolorum non sit nulla.</p>
	</div>
	<div class="button-wrap">
		<label class="button-1" for="checkbox">
			<div class="btn open">Открыть</div>
			<div class="btn close">Закрыть</div>
		</label>
	</div>
</body>
</html>

CSS:

*{
	margin: 0;
	padding: 0;
	font-family: Тahoma, sans-serif;
	font-size: 14px;
}

/* Оформление панели */
#checkbox {
	display: none;
}

.panel {
	position: fixed;
	z-index: 9999;
	top: 0;
	width: 320px;
	/*left: -360px;*/ /*для левой панели*/
	right: -360px; /*для правой панели*/
	background: #01628e;
	transition: all 0.8s;
	height: 100vh;
	color: #FFF;
	padding: 40px 20px;
}

.panel-btn-close {
	font-size: 30px;
	position: absolute;
	z-index: 1;
	top: 8px;
	/*right: 8px;*/ /*для левой панели*/
	left: 8px; /*для правой панели*/
	cursor: pointer;
	transform: rotate(45deg);
	color: #fff;
}

/* Оформление кнопки на странице */
.button-wrap {
	text-align: center;
	width: 120px;
	/*float: right;*/ /*для левой панели*/
	float: left; /*для правой панели*/
	margin: 10px;
}

.button-1 .btn {
	text-decoration: none;
	position: relative;
	font-size: 16px;
	padding: 10px;
	color: #FFF;
	text-transform: uppercase; 
	background: #01628e;
	cursor: pointer; 
}

.button-1 .close {
	display: none;
}

#checkbox:checked + .panel + .button-wrap .button-1 .open {
	display: none;
}

#checkbox:checked + .panel + .button-wrap .button-1 .close {
	display: block;
}

#checkbox:checked + .panel {
	/*left: 0;*/ /*для левой панели*/
	right: 0; /*для правой панели*/
}
Посмотреть демо
При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.



«
»
➤