Как сделать - Анимированное боковое меню
Узнать, как создать анимированное, закрываемое боковое меню навигации.
Анимированные боковые панели
Редактор кода »
Создать анимированное боковое меню
Шаг 1) Добавить HTML:
Пример
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">О Нас</a>
<a href="#">Услуги</a>
<a href="#">Клиенты</a>
<a href="#">Контакт</a>
</div>
<!-- Используйте любой элемент для открытия боковой навигации -->
<span onclick="openNav()">open</span>
<!-- Добавить все содержимое страницы внутри этого div, если вы хотите, чтобы боковая навигация нажимала содержимое страницы вправо (не используется, если вы хотите, чтобы sidenav сидел поверх страницы -->
<div id="main">
...
</div>Шаг 2) Добавить CSS:
Пример
/* Боковое меню навигации */
.sidenav {
height: 100%; /* 100% Полный рост */
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 */
}
/* Ссылки в меню навигации */
.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% непрозрачность элемента тела, чтобы "выделить" в боковой панели:
Толчок боковой навигации с/непрозрачность
/* Установите ширину боковой навигации в 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; /* То же, что и ширина боковой навигации */
}Редактор кода »Совет: Зайдите на наш учебникCSS Навигации чтобы узнать больше о навигационных панелях.
