Как сделать - Сайдбар навигации
Узнайте, как создать анимированное закрываемое боковое навигационное меню на сайте.
Попробуйте сами »
Создать анимированную боковую навигацию
Шаг 1) Добавить HTML:
Пример
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- Используйте любой элемент, чтобы открыть sidenav -->
<span onclick="openNav()">open</span>
<!-- Добавьте весь контент страницы внутри этого div, если вы хотите, чтобы боковая навигация выдвигала контент страницы вправо (не используется, если вы хотите, чтобы sidenav находился сверху страницы -->
<div id="main">
...
</div>
Шаг 2) Добавить CSS:
Пример
/* Боковое навигационное меню */
.sidenav {
height: 100%; /*
100% Full-height */
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 второй эффект перехода слайда в боковой навигации */
}
/* Ссылки меню навигации */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Когда вы наводите курсор мыши на навигационные ссылки, изменяется их цвет */
.sidenav a:hover {
color: #f1f1f1;
}
/* Положение и стиль кнопки закрытия (верхний правый угол) */
.sidenav .closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Стиль содержимого страницы - используйте это, если вы хотите сдвинуть содержимое страницы вправо при открытии боковой навигации */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* На экранах меньшего размера, где высота меньше 450px, измените стиль sidenav (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) {
.sidenav
{padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Шаг 3) Добавить JavaScript:
Пример ниже выскальзывает в боковой навигации и делает его шириной 250 пикселей:
Оверлей боковой навигаци. Пример
/* Установите ширину боковой навигации до 250 пикселей */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
}
/*
Установите ширину боковой навигации на 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Попробуйте сами »
Приведенный ниже пример перемещает боковую навигацию и сдвигает содержимое страницы вправо (значение, используемое для установки ширины sidenav, также используется для установки левого поля "страницы из содержимым"):
Боковая навигация выталкивает контент
/* Установите ширину боковой навигации 250 пикселей, и левый край содержимого страницы - 250 пикселей. */
function openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы - 0. */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
Попробуйте сами »
Приведенный ниже пример также перемещает боковую навигацию и перемещает содержимое страницы вправо, только на этот раз мы добавляем черный цвет фона с непрозрачностью 40% к элементу body, чтобы "выделить" боковую навигацию:
Боковая навигация выталкивает контент с непрозрачностью
/* Установите ширину боковой навигации 250 пикселей, и левое поле содержимого страницы - 250 пикселей и добавьте черный цвет фона к телу. */
function
openNav() {
document.getElementById("mySidenav").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы - 0, и цвет фона тела - белым. */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
Попробуйте сами »
Пример ниже скользит в боковой навигации слева и охватывает всю страницу (ширина 100%):
Боковая навигация на всю ширину:
/* Открыть боковую навигацию */
function
openNav() {
document.getElementById("mySidenav").style.width
= "100%";
}
/* закрыть/скрыть боковую навигацию */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
Попробуйте сами »
Пример ниже открывает и закрывает боковое меню навигации без анимации:
Боковая навигация без анимации
/* Открыть боковую навигацию */
function
openNav() {
document.getElementById("mySidenav").style.display
= "block";
}
/* Закрыть/скрыть боковую навигацию */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
Попробуйте сами »
В приведенном ниже примере показано, как создать правое навигационное меню:
В приведенном ниже примере показано, как создать боковое навигационное меню, которое всегда отображается (зафиксировано):
Всегда отображать боковую навигацию:
/* Боковая навигация */
.sidenav {
height: 100%;
width:
200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Страница из содержимым */
.main {
margin-left: 200px; /* То же, что ширина sidenav */
}
Попробуйте сами »
Совет: Посетите CSS Навбар учебник чтобы узнать больше о панелях навигации на нашем сайте W3Schools на русском.
