Menus suspensos

Parte da seção JavaScript em Ação 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 na navegação para organizar o conteúdo sem ocupar muito espaço.

Primeiro, vamos criar a estrutura HTML para um menu suspenso 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:

// Obtém o botão de alternância do dropdown
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Obtém o menu dropdown
const dropdownMenu = document.querySelector('.dropdown-menu');

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

Por fim, adicione um 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 seja exibido/ocultado quando um botão for clicado.

Etapas:

Em HTML:
- Adicione um atributo onclick ao botão que chame uma função chamada toggleDropdown quando ele for clicado
Em 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>