Neste tutorial, você criará um menu de navegação lateral expansível com JavaScript e CSS. O produto final aparecerá como mostrado abaixo:
tag, e estamos usando um SVG para nosso ícone do menu lateral.
Lembre-se de colocar todo o conteúdo do seu site dentro do div id="main" recipiente para que ele deslize para a direita.
2. Codifique o JavaScript
Em seguida, vamos adicionar o JavaScript que escutará os eventos de clique no ícone do hambúrguer com a classe ham-icon e o botão Fechar que aparece quando o menu de navegação lateral desliza para a tela.
document.querySelector("a.ham-icon").addEventListener("click", function(event){
document.getElementById("sideNavigation").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
});
document.querySelector("a.close-btn").addEventListener("click", function(event){
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
});
Um clique no ícone do hambúrguer deve mostrar a navegação lateral. Fazemos isso definindo a largura de nossa navegação para 250px e ao mesmo tempo adicionar uma margem esquerda de 250px ao conteúdo principal do site.
Um clique no botão fechar deve ocultar a navegação lateral. Fazemos isso alterando a largura de nossa navegação de volta para 0 enquanto definimos a margem esquerda do conteúdo principal do site para 0.
3. Estilo com CSS
Finalmente, precisaremos estilizar nossa página com algum CSS para o menu lateral e nossos links. O CSS colocará corretamente todos os elementos da página da Web onde pretendemos que eles estejam. Também aplicaremos algumas animações simples com a ajuda do transition propriedade. Vamos dar uma olhada no CSS uma parte de cada vez.
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 4rem;
transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
font-family: "Bebas Neue";
}
.sidenav a {
padding: 0.5rem 1rem;
text-decoration: none;
color: #bdbdbd;
display: block;
transition: 0.4s;
white-space: nowrap;
font-size: 2rem;
}
.sidenav a:hover {
color: white;
background: #9e9e9e;
}
Nós definimos o height da navegação lateral para 100% e sua inicial width para 0 para mantê-lo escondido. No entanto, o conteúdo da navegação lateral só fica oculto se o valor de overflow-x propriedade está definida para hidden.
A propriedade de transição garante que a mudança na largura da navegação lateral não seja repentina e a função de atenuação a torna um pouco saltitante.
Para os links dentro da navegação lateral, definimos o valor de white-space propriedade para nowrap para que o texto do menu não se espalhe por várias linhas.
.sidenav .close-btn {
position: absolute;
top: -1rem;
right: 1rem;
font-size: 5rem;
}
.sidenav .close-btn:hover {
background: initial;
transform: scale(1.2);
}
O CSS acima estiliza nosso botão Fechar separadamente de outros links na navegação lateral. Aplicamos o posicionamento absoluto ao botão Fechar e evitamos que seu plano de fundo fique cinza claro ao passar o mouse. Ele também aumenta 20% de tamanho quando os usuários passam o mouse sobre ele.
Agora, o CSS a seguir garantirá que a mudança na posição do conteúdo principal seja sincronizada com o menu de navegação usando a mesma duração de transição e a mesma função de atenuação. Definindo o valor de overflow-x propriedade para hidden garante que nenhuma barra de rolagem horizontal apareça devido à mudança de conteúdo.
#main {
transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
padding: 20px;
width: 100%;
}
body {
overflow-x: hidden;
}
Também podemos adicionar um pequeno movimento rotacional ao ícone do hambúrguer com a ajuda de seguir o CSS. Aplica uma rotação de 180 graus ao ícone do hambúrguer durante um período de 0,5 segundos.
a svg {
transition: all 0.5s ease;
}
a svg:hover {
transform: rotate(180deg);
}
Por fim, vamos tornar o menu de navegação responsivo ajustando o espaçamento e o tamanho dos links com o seguinte CSS. Ele garante que o menu não saia dos limites em telas com espaço vertical menor.
@media screen and (max-height: 480px) {
.sidenav {
padding-top: 3rem;
}
.sidenav a {
font-size: 1.5rem;
}
}
Seu menu de navegação deve ser como a seguinte demonstração do CodePen neste momento.
Removendo o slide
Para fazer o menu aparecer sem animação de slides, basta fazer alterações na propriedade CSS transitionconforme mostrado de forma abreviada abaixo:
.sidenav {
transition: 0s;
}
#main {
transition: margin-left 0s;
}
Isso fará com que a alteração apareça instantaneamente, pois não há atraso especificado no transition. O padrão que usamos é 0.5s.
Conclusão
Criar um menu lateral leva apenas algumas linhas de código e não precisa usar muitos recursos. Tornar o código responsivo para trabalhar com diferentes resoluções de tela do dispositivo é apenas um caso de modificação do CSS adicionando consultas de mídia para os casos específicos.
Para levar isso adiante, você pode estilizar seu menu com uma estrutura CSS como Bootstrap ou Bulma.
Este post foi atualizado com contribuições de Monty Shokeen. Monty é um desenvolvedor full-stack que também adora escrever tutoriais e aprender sobre novas bibliotecas JavaScript.
