Como criar: menu off-canvas

Criar menu off-canvas

Primeiro passo - Adicionar 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>
<!-- Use qualquer elemento para abrir a navegação lateral -->
<span onclick="openNav()">open</span>
<!-- Se desejar que a navegação lateral empurre o conteúdo da página para a direita, adicione todo o conteúdo deste div (se desejar que a navegação lateral fique na parte superior da página, não é necessário usar essa configuração) -->
<div id="main">
  ...
</div>

Segunda etapa - Adicionar CSS:

/* Menu de navegação lateral */
.sidenav {
  height: 100%; /* 100% da altura */
  width: 0; /* 0 largura - alterado por JavaScript */
  position: fixed; /* Mantém na posição original */
  z-index: 1; /* Mantém no topo */
  top: 0;
  left: 0;
  background-color: #111; /* Preto */
  overflow-x: hidden; /* Desativa a rolagem horizontal */
  padding-top: 60px; /* Conteúdo distante do topo em 60 pixels */
  transition: 0.5s; /* Efeito de transição de 0.5 segundos, para a barra de navegação lateral deslizar */
}
/* Links do menu de navegação */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Altera a cor ao passar o mouse sobre o link de navegação */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Botão de fechamento: posição e estilo (canto superior direito) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Define o estilo do conteúdo da página - se você deseja empurrar o conteúdo da página para a direita ao abrir a navegação lateral, use essa opção */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* No pequeno tela de tela com altura menor que 450 pixels, altera o estilo da barra de navegação lateral (reduzindo o padding interno e o tamanho da fonte) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Passo 3 - Adicionar JavaScript:

Menu fora do canvas

/* Define a largura da navegação lateral como 250px e o margem esquerdo externo do conteúdo da página como 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Define a largura da navegação lateral como 0 e o margem esquerdo externo do conteúdo da página como 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Experimente você mesmo

O exemplo abaixo também desliza a barra de navegação lateral para dentro e empurra o conteúdo da página para a direita. No entanto, desta vez, adicionamos uma cor de fundo preta semi-transparente (40% de opacidade) ao elemento body para "destacar" a barra de navegação lateral:

Menu fora do canvas com transparência

/* Define a largura da navegação lateral como 250px, o margem esquerdo externo do conteúdo da página como 250px e adiciona uma cor de fundo preta ao 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)";
}
/* Define a largura da navegação lateral como 0, o margem esquerda do conteúdo da página como 0 e a cor de fundo do body como branca */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Barra de navegação CSS