Как сделать - Свернутую боковую панель
Узнать, как создать складное меню боковой панели.
Редактор кода »
Создание свернутой боковой панели
Шаг 1) Добавить HTML:
Пример
<div id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">О Нас</a>
<a href="#">Услуги</a>
<a href="#">Клинты</a>
<a href="#">Контакт</a>
</div>
<button class="openbtn" onclick="openNav()">☰ Тумблер боковой панели </button>
<h2>Свернутая боковая панель</h2>
<p>Содержание...</p>
Шаг 2) Добавить CSS:
Пример
/* Меню боковой панели */
.sidepanel {
height: 250px; /* Укажите высоту */
width: 0; /* 0 ширина-измените это с помощью JavaScript */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Оставайтесь на вершине */
top: 0;
left: 0;
background-color: #111; /* Черный */
overflow-x: hidden; /* Отключить горизонтальную прокрутку */
padding-top: 60px; /* Поместите содержимое 60px сверху */
transition: 0.5s; /* 0.5 секунды эффект перехода для скольжения в боковой панели */
}
/* Боковая панель ссылок */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* При наведении курсора мыши на навигационные ссылки измените их цвет */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Положение и стиль кнопки закрытия (верхний правый угол) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Стиль кнопка, которая используется для открытия боковой панели */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
Шаг 3) Добавить JavaScript:
Пример
/* Установите ширину боковой панели на 250 пикселей (показать его) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Установите ширину боковой панели в 0 (скройте ее) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
Редактор кода »
Совет: Зайдите на наш учебник CSS Навигация чтобы узнать больше о навигационных панелях.
