Como fazer uma barra de menu móvel com HTML, CSS e JavaScript

Sem dúvida, você pode criar um menu móvel alternável usando estruturas CSS como TailWind ou BootStrap.

Mas qual é o conceito por trás disso? E como você pode fazer um do zero sem depender dessas estruturas CSS?

Fazer você mesmo o acima fornece controle total de personalização. Então, sem mais delongas, veja como criar um menu móvel alternável usando sua linguagem de programação preferida.

Como Criar Seu Menu Móvel Alternável

Se ainda não tiver feito isso, abra a pasta do projeto e crie os arquivos do projeto (HTML, CSS e JavaScript).

Abaixo, você verá exemplos do código necessário para todos os três tipos. E se ainda não o fez, considere fazer o download esses aplicativos para aprender código antes de continuar a ler.

Vamos começar com HTML:

 Crie três divs para representar a barra de menu suspenso de três linhas 








 Adicione suas navegações aqui 


Lar
Cerca de
Contato

CSS:

/ * A demarcação desta seção é apenas para o propósito do tutorial * /
seção{ 
largura: 800px;
altura: 600px;





instagram viewer


margem superior: 50px;
margem esquerda: 250px;
borda: preto sólido 1px;
plano de fundo: # e6e3dc;
}
/ * posicione o contêiner divs em seu DOM * /
# toggle-container {
display: grade;
largura: ajuste-conteúdo;
margem esquerda: 720px;
margem superior: 10px;
}
/ * Empilhe os três divs um sobre o outro. Em seguida, defina uma altura e largura para eles. * /
#um dois três{
fundo: preto;
largura: 30px;
altura: 3px;
margem superior: 5px;
} 
.toggle-content {
Mostrar nenhum;
margem esquerda: 700px;
margem superior: 20px;
}
.toggle-content a {
display: bloco;
decoração de texto: nenhum;
cor preta;
tamanho da fonte: 30px;
}
.toggle-content a: hover {
cor azul;
}
/ * Exibir a instância de classe criada por JavaScript no bloco * /
.displayed {
display: bloco;
}

Adicionar JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("click", function () {
// Aplique uma intensidade de classe a cada navegação e defina a exibição para alternar:
toggleContents.classList.toggle ("exibido");
});

Esta é a aparência de uma saída funcional quando você clica na barra de menu:

O menu pode ser alternado, portanto, clicar na barra novamente - ou em qualquer lugar da página - oculta as navegações.

Relacionado: Elementos de estilo de site com um gradiente de fundo CSS

Seu navegador pode não suportar a ocultação do conteúdo quando você clica em qualquer lugar de sua página da web. Você pode tentar forçar isso usando um destino de evento e um loop de JavaScript. Você pode fazer isso adicionando o seguinte bloco de código ao seu JavaScript:

// Adicione um evento de clique à sua página da web:
window.onclick = function (event) {
// Segmente o evento de clique na barra de menu para permitir que o corpo da página da web o rastreie:
if (! event.target.matches ('# toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Oculte as navegações percorrendo cada uma delas:
para (var i = 0; i var descartado = suspensos [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('display');
}
}
}
}

Então, aqui está um resumo do que você acabou de fazer: Você criou três linhas usando o div tag de HTML. Você ajustou sua altura e largura e os posicionou em seu DOM. Em seguida, você atribuiu a eles um evento de clique usando JavaScript.

Relacionado: Como fazer um site: para iniciantes

Você define a exibição inicial de suas navegações para Nenhum para ocultá-los quando a página for carregada. Então o clique evento nas três linhas alterna essas navegações com base em uma classe instanciada em JavaScript (exibido). Finalmente, você usou esta nova classe para exibir as navegações usando CSS e JavaScript toggleContents método.

Relacionado: Tendências de design neumórfico em HTML, CSS e JavaScript

O resto do CSS, entretanto, depende de sua preferência. Mas aquele no snippet CSS de exemplo aqui deve dar uma ideia de como estilizar o seu.

Seja mais criativo ao construir seu site

Fazer um site visualmente atraente requer alguma criatividade. E um site amigável tem mais chances de converter seu público do que um sem graça.

Embora tenhamos mostrado como criar um menu de navegação personalizado aqui, você ainda pode ir além e torná-lo mais atraente. Por exemplo, você pode animar a exibição das navegações, dar a elas uma cor de fundo e muito mais. E o que quer que você faça, certifique-se de que seu site use as melhores práticas de design e layouts fáceis de usar para os usuários.

Como reutilizar seu hardware antigo como um profissional

Tem muita tecnologia antiga bagunçando sua casa? Descubra exatamente o que fazer com ele neste guia de reciclagem de tecnologia!

Leia a seguir

Sobre o autor