DEV Community

Cover image for Receita de Menu Hambúrguer
Carlos Eduardo Ramos
Carlos Eduardo Ramos

Posted on • Updated on

Receita de Menu Hambúrguer

Sumário

A importância dos hambúrgueres

A TIC Domicílios é uma pesquisa realizada anualmente desde 2005, com o objetivo de medir a posse, o uso, o acesso e os hábitos da população brasileira em relação às Tecnologias da Informação e Comunicação.

Em 2022, o resultado da pesquisa constatou que 92 milhões de brasileiros acessam a internet apenas pelo celular.
Além disso o celular é o meio mais utilizado para acessar a internet (99% das pessoas da amostra o utilizam).

Esses números nos chamam a atenção para a importância da responsividade.

Um problema comum ao desenvolver sites responsivos é lidar com o tamanho reduzido das telas de celulares.

Na maioria das vezes o menu de navegação, que é um dos elementos mais comuns em sites, possui uma solução em comum que é o uso do chamado "menu hambúrguer".

Existem diversas formas de se fazer um menu hambúrguer (algumas mais simples, outras um pouco mais trabalhosas):

  • Com/sem animações;
  • Usando uma imagens ou elementos html para criar o visual do botão.
  • Usando/não usando JavaScript;
  • Usando 1 botão (abrir/fechar) ou 2 botões diferentes (abrir e fechar);

Por ser uma dúvida muito recorrente de iniciantes, veremos a seguir uma introdução de como criar esse componente de uma forma muito simples.

Requisitos e características do hambúrguer que iremos cozinhar

  1. Nosso menu terá 03 links (Home, Produtos e Contato);
  2. Utilizaremos apenas 1 botão, que será responsável pela abertura e fechamento do menu hambúrguer;
  3. Ao abrir o menu, o ícone do botão será alterado para um ícone de fechar e ao fechá-lo, irá retornar para o ícone padrão de um menu hambúrguer;
  4. Não serão usadas animações.

Ingredientes:

  • HTML;
  • CSS;
  • Javascript.

Obs: Se você ainda não sabe JavaScript, não precisa se assustar pois além de ser usado o mínimo possível, ainda será explicado passo-a-passo!

mise en place

Mise en place: Preparando o HTML

Para tornar mais simples a visualização do código, nosso cabeçalho <header> irá conter apenas o botão <button> responsável por exibir/esconder o menu e o menu de navegação <nav> que contém uma lista não ordenada <ul> com 03 itens de lista <li> que possuem uma âncora/link em cada <a>.

  • É importante se atentar para o uso de tags que tenham valor semântico, como o <header> e o <nav>.
<header>
  <button class="menu__button">Abrir</button>
  <nav class="menu__nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Produtos</a></li>
      <li><a href="#">Contatos</a></li>
    </ul>
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

hamburguer na churrasqueira

Acendendo o fogo: configurando o CSS.

Adicionaremos alguns estilos aos nossos elementos, apenas para facilitar a visualização. Irei separar a estilização em 2 etapas:

  • Pré-aquecer: nessa parte será incluído tudo que é opcional, feito apenas para melhor apresentação do layout, portanto serão exibidas sem explicações aprofundadas.
  • Assar: nessa parte irei incluir passo a passo os temperos que darão sabor ao nosso hambúrguer.

Estilizaremos utilizando seletores de tags, apenas para ficar mais fácil de entender a qual elemento estamos nos referindo.

Pré-aquecer

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  padding: 5px;
  background: transparent;
  border: solid 3px tomato;
  border-radius: .5rem;
  font-weight: bold;
  width: 4rem;
  cursor: pointer;
}

button:hover {
  background: #000D;
  color: white;
}

ul {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  border: solid 2px black;
  border-radius: 5px;
}

li {
  list-style: none;
  padding: .3rem 1rem;
}

li:hover {
  background: #0003;
}

li:hover a{
  text-decoration: underline;
}

a {
  text-decoration: none;
  color: black;
}

Enter fullscreen mode Exit fullscreen mode

Nosso resultado atual:

Assar

As alterações a seguir, afetarão diretamente o comportamento do menú.
A intenção é que a navbar esteja inicialmente escondida ao acessarmos a página através deu um dispositivo que possua uma tela pequena.
Para isso, iremos alterar seu display padrão para none:

nav {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Para fazer com que ele volte a aparecer, iremos criar uma classe modificadora com o nome de nav-active.
Quando essa classe estiver presente no elemento, ele será exibido. Quando ela for retirada, o elemento voltará a ter display: none. Quem fará o controle de incluir/retirar essa classe do nav será nosso botão.

.nav-active {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

Montando hambúrguer

Misturando com JS: dando vida ao botão

Para que consigamos alterar as classes do nav ao clicar no botão. Precisaremos encontrar o elemento do <button> no DOM e armazená-lo em uma variável.
Faremos isso utilizando o comando querySelector.

Utilizaremos a classe desse botão .menu__button para selecionário e o armazenaremos em uma constante com nome de botao.

const botao = document.querySelector('.menu__button')
Enter fullscreen mode Exit fullscreen mode

Agora adicionaremos um escutador de eventos nesse botão, para declararmos uma função que será executada sempre que o botão for clicado.
Esse escutador de eventos recebe dois parâmetros, o evento que será escutado (no nosso caso será o Click), e uma função callback que será executada quando o evento for disparado.

botao.addEventListener('click', funcaoCallback)
Enter fullscreen mode Exit fullscreen mode

Agora basta criarmos a função que irá adicionar e removar a classe active conforme cliquemos no botão, para isso utilizaremos o método classList.toggle. Esse método verifica se o elemento possui uma determinada classe, se ele já tiver a classe ela é removida, se não tiver, ela é adicionada.

function funcaoCallback() {
  const menuNav = document.querySelector('.menu__nav')
  menuNav.classList.toggle('nav-active')
}
Enter fullscreen mode Exit fullscreen mode

Agora nosso menu já está funcionando, só iremos ajustar um detalhe.
O botão está exibindo o texto "Abrir". Vamos fazer com que esse texto seja alterado para "Fechar" quando o menu já estiver aberto alterando nossa funcaoCallback e incluindo um operador ternário:

function funcaoCallback() {
  const menuNav = document.querySelector('.menu__nav')
  menuNav.classList.toggle('nav-active')

  button.textContent === "Abrir"
    ? button.textContent = "Fechar"
    : button.textContent = "Abrir"
}
Enter fullscreen mode Exit fullscreen mode

Alteramos o texto do botão para tornar mais fácil o exemplo. Mas podemos utilizar a mesma lógica para alterar o background, por exemplo, alternando entre um ícone de abrir e fechar.

Exemplo prático

Para melhor visualização do menu em prática, foram incluídos mais alguns elementos no header, ícones no botão do menu e um media querie para alternar.

Top comments (14)

Collapse
 
jaisoncosta profile image
Jaison Costa

Parabéns cara, ficou bem massa! Ma ajudou bastante. Só um feedback: no texto você diz que vai criar uma classe modificadora com o nome de nav-active. Porém, no desenvolvimento do JS, você chama a classe de menu-active.

Mas me ajudou muuuuito, valeu demais pelo artigo.

Collapse
 
ramoscarloseduardo profile image
Carlos Eduardo Ramos

Obrigado por avisar!! Alterei o código para ficarem iguais. ❤

Collapse
 
doccaio profile image
Caio

Excelente , vou precisar usar isso , esse artigo vai me ajudar .

Collapse
 
envitab profile image
Ekemini Samuel

Bem-vindo à comunidade DEV Caio, 🎉 Fico feliz em saber que o artigo será útil.

Collapse
 
sucodelarangela profile image
Angela Caldas

Cara, eu AMEI o estilo receita do artigo, ficou muito bom! Parabéns!

Collapse
 
ramoscarloseduardo profile image
Carlos Eduardo Ramos

Aah, que bom que gostou!! 😍 me inspirei em você ao tentar incluir uns gifs kkkk

Collapse
 
sucodelarangela profile image
Angela Caldas

Amo gifs, haha! O problema dos teus é que me fez gastar uma grana com fast food depois de ler hehehe

Collapse
 
zeotoni profile image
Ezequiel Otoni

Muito bom Carlos. Parabéns 👏🏻👏🏻

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

Obrigado por compartilhar 👍🏾

Collapse
 
gabriel_kanda_2944d7199ea profile image
GK

Excelente didática! Mas o código proposto no artigo não funciona, as classes não batem. E menu hambúrguer não tem três linhas horizontais?
Que venham mais artigos nesse formato!!!

Collapse
 
ramoscarloseduardo profile image
Carlos Eduardo Ramos • Edited

Olá amigo, acredito que estivesse se referindo à classe "menu-button" que estava errada em uma parte do texto (deveria estar "menu__button"), obrigado por me avisar, já corrigi! 💙

Quanto ao ícone padrão do menu hambúrguer, você está correto e são 3 linhas horizontais como coloquei no exemplo prático.
Usei o texto Abrir/Fechar no exemplo para tentar deixar mais simples a alternância de estados.

Collapse
 
augustowhonorata profile image
Augusto Honorata

Incrivel demais esse artigo, muito bom. Estou iniciando na área agora e me ajudou bastante a entender algumas coisas que estava em dúvida. Muito obrigado Carlos.

Collapse
 
marcelluscaio profile image
Caio Marcellus Cabral

Carlos, genial a ideia de fazer o artigo como uma receita. Muito bom! Esperando as receitas de menu hamburguer gourmet!

Collapse
 
rodrijr profile image
Rodrigo

Bom demais !