Jak utworzyć: menu Off-Canvas

Utwórz menu Off-Canvas

Krok 1 - Dodaj 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>
<!-- Użyj dowolnego elementu do otwarcia nawigacji boczonej -->
<span onclick="openNav()">open</span>
<!-- Jeśli chcesz, aby nawigacja bocznica przemieściła zawartość strony na prawo, dodaj całą zawartość do tego div (jeśli nie chcesz używać tego ustawienia, aby nawigacja bocznica pozostała na górze strony, nie używaj tego ustawienia) -->
<div id="main">
  ...
</div>

Krok drugi - dodaj CSS:

/* Menu nawigacyjne po bokach */
.sidenav {
  height: 100%; /* 100% pełna wysokość */
  width: 0; /* 0 szerokość - ustawienie to zostanie zmienione przez JavaScript */
  position: fixed; /* Zostaje na miejscu */
  z-index: 1; /* Zostanie na wierzchu */
  top: 0;
  left: 0;
  background-color: #111; /* Czarny */
  overflow-x: hidden; /* Wyłączenie przewijania poziomego */
  padding-top: 60px; /* Odległość od góry 60 pikseli */
  transition: 0.5s; /* Efekt przejścia 0.5 sekundy, aby panel nawigacyjny przesuwał się w lewo */
}
/* Linki menu nawigacyjnego */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Zmiana koloru, gdy mysz jest nad linkiem nawigacyjnym */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Położenie i styl przycisku zamknięcia (w prawym górnym rogu) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Ustaw styl zawartości strony - jeśli chcesz, aby zawartość strony przesuwała się w prawo podczas otwierania nawigacji bocznej, użyj tej opcji */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* W małych ekranach o wysokości mniejszej niż 450 pikseli, zmień styl nawigacji bocznej (zmniejsz wewnętrzne marginesy i rozmiar czcionki) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Krok 3 - Dodaj JavaScript:

Menu poza płótnem

/* Ustaw szerokość nawigacji bocznej na 250px, lewy margines zawartości strony na 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Ustaw szerokość nawigacji bocznej na 0, lewy margines zawartości strony na 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Spróbuj sam

Poniższy przykład również przesuwa nawigację boczną w lewo i przesuwa zawartość strony w prawo. Tym razem dodajemy półprzezroczysty (40% przezroczystości) czarny kolor tła do elementu body, aby "wyróżnić" nawigację boczną:

Menu poza płótnem z przezroczystością

/* Ustaw szerokość nawigacji bocznej na 250px, lewy zewnętrzny margines zawartości strony na 250px oraz dodaj ciemny kolor tła do ciała */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Ustaw szerokość nawigacji bocznej na 0, lewy margines zawartości strony na 0 oraz kolor tła ciała na biały */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Spróbuj sam

Strony związane

Tutorial:CSS nawigacja