Dica de ouro: Saiba como fazer uma navbar responsiva

Hoje é praticamente impossível ter um site que não seja responsivo.

Existem várias formas criativas e técnicas de lidar com responsividade (ex: Flexbox, Media Queries, CSS Grid, etc.) nos mais diferentes contextos, mas há algumas adaptações que são praticamente padrões em todos os projetos.

Um claro exemplo é a navbar responsiva. Quando ela possui muitos itens, inevitavelmente se torna imprópria para o ambiente mobile, pois os itens literalmente não cabem no espaço disponível.

Nessas situações, precisamos pensar em técnicas criativas. Hoje vamos aprender como fazer uma navbar responsiva minimalista e elegante usando apenas o básico HTML, CSS e um pouquinho de nada de JavaScript.

Para aprendemos como fazer isso, tomaremos como exemplo a solução que apliquei no meu próprio site pessoal. Sou suspeito pra falar, mas acho que ela atendeu bem ao seu objetivo 😄

Vamos começar criando a estrutura básica do site para desktop. Neste caso, precisamos essencialmente de três elementos HTML: uma tag <nav> para a barra de navegação, uma tag <img> para o logotipo e tags <ul> e <li> para a lista de links:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Responsivo</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar">
    <img src="logo.png" alt="logo">
    <div class="navbar-links">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </div>
  </nav>
</body>

</html>

Vamos aplicar o CSS básico para que ele funcione bem no desktop:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  position: relative;
  justify-content: space-around;
  align-items: center;
  border-bottom-color: rgb(234, 236, 243);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.navbar img {
  width: 220px;
}

.navbar-links {
  height: 100%;
}

.navbar-links ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  display: block;
  text-decoration: none;
  padding: 1rem;
  color: #333;
  font-weight: 500;
}

.navbar-links li:hover {
  background-color: #DBDBDB;
}

Aqui surge nosso primeiro problema: à medida que a tela fica menor, nossa navbar começa a transbordar horizontalmente. Esse comportamento não é desejável. Portanto, precisamos implementar o menu “hambúrguer”.
O primeiro passo para isso é adicionar no HTML o botão que corresponderá ao menu e as opções que ele oferecerá. Há diferentes maneiras de criamos esse botão, por ora, faremos ela na “mão”:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Responsivo</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar">
    <img src="logo.png" alt="logo">
    <a href="#" class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="navbar-links">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </div>
  </nav>

  <script src="script.js"></script>
</body>

</html>

Agora vamos adicionar o CSS que vai construí-lo adequadamente na tela:

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: #333;
  border-radius: 10px;
}

Agora temos que ajustar para que ele apareça somente quando o dispositivo tiver a tela pequena. Para isso, precisaremos das Media Queries.
As media queries funcionam como condicionais dentro do nosso código CSS. Desta forma, conseguimos trabalhar com condições para que um elemento apareça ou não. Vamos ver como fica nosso exemplo:

@media (max-width: 800px) {
  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .toggle-button {
    display: flex;
  }

  .navbar-links {
    display: none;
    width: 100%;
  }

  .navbar-links ul {
    width: 100%;
    flex-direction: column;
  }

  .navbar-links ul li {
    text-align: center;
  }

  .navbar-links ul li a {
    padding: .5rem 1rem;
  }

}

Agora temos mais um problema para resolver. Ao clicar no menu, queremos que os itens apareçam e quando clicarmos novamente, que eles sumam. É neste momento que precisaremos da ajuda do JavaScript!

const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("navbar-links")[0];

toggleButton.addEventListener("click", () => {
  navbarLinks.classList.toggle("active");
});

.navbar-links.active {
  display: flex;
}

E pronto! Temos nossa navbar responsiva lindona! Basta adaptar os textos, opções, tamanhos e afins para melhor se adequar ao seu projeto! 😀

—

Repositório

https://github.com/Professor-DiegoPinho/menu-responsivo

Agradecimentos

Gostou deste conteúdo? Então curta e compartilhe! 👏

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by:

Dica de ouro: Saiba como fazer uma navbar responsiva

Diego Pinho

Repositório

Agradecimentos

Diego Pinho