Menus dropdown

Parte da seção JavaScript in Action do Journey de HTML da Coddy. Lição 15 de 27.

Menus suspensos são componentes de UI que revelam opções adicionais quando acionados. Eles são comumente usados em navegação para organizar o conteúdo sem ocupar muito espaço.

Primeiro, vamos criar a estrutura HTML para um dropdown básico:

<div class="dropdown">
  <button class="dropdown-toggle">Menu</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Agora, vamos adicionar o JavaScript para alternar a visibilidade do menu suspenso:

// Obter o botão de alternância do menu suspenso
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Obter o menu suspenso
const dropdownMenu = document.querySelector('.dropdown-menu');

// Adicionar um ouvinte de evento de clique ao botão de alternância
dropdownToggle.addEventListener('click', function() {
  // Alternar a classe 'show' no menu suspenso
  dropdownMenu.classList.toggle('show');
});

Por fim, adicione um pouco de CSS básico para ocultar/mostrar o menu suspenso:

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

Quando você clicar no botão "Menu", o menu suspenso aparecerá. Clicar nele novamente ocultará o menu.

Desafio

Fácil

Crie um menu suspenso que aparece/desaparece quando um botão é clicado.

Passos:

No HTML:
- Adicione um atributo onclick ao botão que chama uma função chamada toggleDropdown quando clicado
No JavaScript:
- Crie uma função chamada toggleDropdown
- Dentro da função, alterne a classe "show" no elemento com o ID “myDropdown”

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Save the Forests</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Save the Forests</h1>
    <p>Even planting one or two trees makes a difference.</p>
  </header>

  <div class="dropdown">
    <button class="dropbtn">Learn More ▼</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Why forests matter</a>
      <a href="#">How to grow a tree</a>
      <a href="#">Community projects</a>
    </div>
  </div>

  <main>
    <section>
      <h2>Why Trees Are Important</h2>
      <p>
        Forests clean our air, give us oxygen, and are home to countless animals.  
        Each tree you plant helps fight climate change and supports life on Earth.
      </p>
    </section>
    <section>
      <h2> Start Small</h2>
      <p>
        Don’t wait for a big change. Start with just one or two trees in your yard or community.  
        Your small action inspires others!
      </p>
    </section>
  </main>

  <footer>
    <p> Together we can make the planet greener.</p>
  </footer>

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