Como criar: botão de navegação lateral

Como criar uma navegação lateral suspenso

Primeiro passo - Adicionar HTML:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

Segundo passo - Adicionar CSS:

/* definir estilo dos links dentro da navegação lateral */
#mySidenav a {
  position: absolute; /* posicionar em relação à janela do navegador */
  left: -80px; /* posicionar os elementos fora da tela */
  transition: 0.3s; /* adicionar efeito de transição ao passar o mouse */
  padding: 15px; /* 15px de espaçamento interno */
  width: 100px; /* definir largura específica */
  text-decoration: none; /* remover sublinhado */
  font-size: 20px; /* aumentar o tamanho da fonte */
  color: white; /* definir cor do texto como branca */
  border-radius: 0 5px 5px 0; /* cantos superior direito e inferior direito arredondados */
}
#mySidenav a:hover {
  left: 0; /* ao passar o mouse, fazer com que o elemento se mostre da maneira correta */
}
/* link about: distância do topo 20px, fundo verde */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* azul */
}
#projects {
  top: 140px;
  background-color: #f44336; /* vermelho */
}
#contact {
  top: 200px;
  background-color: #555 /* cinzento claro */
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Barra de navegação CSS