Как создать: меню за пределами канвы

Создание меню за пределами канвы

Шаг 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>
<!-- Используйте любое элемент для открытия sidebar навигации -->
<span onclick="openNav()">open</span>
<!-- Если вы хотите, чтобы sidebar оттолкнул содержимое страницы в правую сторону, добавьте все содержимое в этот div (если нужно, чтобы sidebar оставался в верху страницы, это настройка не нужна) -->
<div id="main">
  ...
</div>

Шаг 2 - Добавьте CSS:

/* Sidebar меню навигации */
.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; /* Содержимое отступает от верха на 60 пикселей */
  transition: 0.5s; /* Переход продолжительностью 0.5 секунды, чтобы sidebar слезала влево */
}
/* Ссылки меню навигации */
.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;
}
/* Изменить стиль боковой навигации на маленьких экранах с высотой экрана менее 450 пикселей (уменьшить отступы и размер шрифта) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Шаг 3 - Добавить JavaScript:

Меню за пределами канвы

/* Установить ширину боковой навигации в 250px, левый отступ содержимого страницы в 250px */
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, чтобы "выделить" боковую навигацию:

Меню за пределами канвы с прозрачностью

/* Установить ширину боковой навигации в 250px, левый отступ содержимого страницы в 250px и добавить черный фоновый цвет body */
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 и цвет фона body в белый */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Попробуйте сами

Соответствующие страницы

Учебник:CSS навигационная панель