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.

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

Abaixo, você verá exemplos do código de que precisa 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:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

Adicionar JavaScript:

como contornar sites de bloqueio de escolas

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

Esta é a aparência de uma saída de trabalho 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:

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.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 faça o que fizer, certifique-se de que seu site usa as melhores práticas de design e layouts fáceis de usar para os usuários.

Compartilhado Compartilhado Tweet O email 15 Comandos do Prompt de Comando do Windows (CMD) que você deve conhecer

O prompt de comando ainda é uma ferramenta poderosa do Windows. Aqui estão os comandos CMD mais úteis que todo usuário do Windows precisa saber.

Leia a seguir Tópicos relacionados

Programação
HTML
CSS
JavaScript
Dicas de codificação

Sobre o autor Idisou Omisola(94 artigos publicados)

Idowu é apaixonado por qualquer tecnologia inteligente e produtividade. Em seu tempo livre, ele brinca com programação e muda para o tabuleiro de xadrez quando está entediado, mas também adora quebrar a rotina de vez em quando. Sua paixão por mostrar às pessoas o caminho da tecnologia moderna o motiva a escrever mais.

Mais de Idowu Omisola

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever

Como Criar Seu Menu Móvel Alternável

Seja mais criativo ao construir seu site

Assine a nossa newsletter