Receita de Menu Hambúrguer

Sumário

• A importância dos hambúrgueres
• Requisitos e características do hambúrguer que iremos cozinhar
• Ingredientes
• Mise en place: Preparando o HTML
• Ligando o forno: configurando o CSS
• Misturando com JS: dando vida ao botão
• Exemplo prático

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: 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>

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;
}

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;
}

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;
}

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')

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)

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')
}

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"
}

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.