Как сделать - Меню вне холста
Узнать, как создать меню вне холста.
Редактор кода »
Создание меню вне холста
Шаг 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";
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";
}
Редактор кода »
Совет: Зайдите на наш учебник CSS Навигации чтобы узнать больше о навигационных панелях.