(, CSS, JS HTML) Tentando adicionar Clickable suspensa, botão ícone

votos
0

Fiz ícone hambúrguer na minha barra de navegação do site. Eu adicionei animação simples JavaScript, ele funciona muito bem. Agora eu quero no ícone para abrir Clickable suspensa, estou meio confuso desde que eu já estou usando arquivo de script, e classe.

Eu não sei como eu posso combinar dois código JS à mesma classe, e como editar as ligações suspensas com as barras de ícones originais ..

este é o meu ícone: HTML:

<div class=hamburger onclick=myFunction(this)> 

        <div class=bar1></div>
        <div class=bar2></div>
        <div class=bar3></div>

</div>

CSS:

.hamburger {
      cursor: pointer;
      color:#333;
      list-style: none;
      float: right;
      padding: 18px;
      position: relative;
      display: inline-block; 
}

javascript:

function myFunction(x) {
    x.classList.toggle(change);
}

Finalmente, este é o menu suspenso eu estou tentando adicionar:

HTML:

    <div class=dropdown>
      <button onclick=myFunction() class=dropbtn>Dropdown</button>
      <div id=myDropdown class=dropdown-content>
        <a href=#home>Home</a>
        <a href=#about>About</a>
        <a href=#contact>Contact</a>
      </div>
    </div>

CSS:

    .dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown a:hover {background-color: #ddd;}

    .show {display: block;}

javascript:

    function myFunction() {
      document.getElementById(myDropdown).classList.toggle(show);
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName(dropdown-content);
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
Publicado 03/12/2019 em 00:01
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

Você pode usar a mesma função para ambos os elementos. Eu acho que as principais questões é que você faça o drop-down desaparecem quando clicado fora dela. Este "fora" inclui o ícone do menu do Hamburger.

Aqui está um exemplo de trabalho:

// Keep a refernce for dropdown to access it from any function
const dropdown = document.getElementById("myDropdown");

function myFunction() {
  dropdown.classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  // Make sure ".hamburger" or any other class is included so when it is clicked it won't hide the dropdown
  if (!event.target.matches('.dropbtn, .hamburger')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
.hamburger {
  cursor: pointer;
  color: #333;
  list-style: none;
  float: right;
  padding: 18px;
  position: relative;
  display: inline-block;
  width: 20px;
}

.hamburger>div {
  height: 2px;
  background-color: black;
  width: 100%;
  margin-bottom: 5px;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}
<div class="dropdown">
 <div class="hamburger" onclick="myFunction()">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>

Respondeu 03/12/2019 em 07:59
fonte usuário

votos
0

Eu tentei esta solução, espero que funcione para você:

<style>
  .hamburger {
    cursor: pointer;
    color: #333;
    list-style: none;
    float: right;
    padding: 18px;
    position: relative;
    display: inline-block;
  }

  .bar1, .bar2,.bar3 {
    width: 40px;
    height: 2px;
    background-color: black;
    margin-bottom: 5px;
  }

  .dropbtn {
    background-color: #3498db;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }

  .dropbtn:hover,
  .dropbtn:focus {
    background-color: #2980b9;
  }

  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    top: 50px;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown a:hover {
    background-color: #ddd;
  }

  .show {
    display: block;
  }
</style>



<div class="dropdown">
    <div class="hamburger" onclick="myFunction()">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
  <!-- <button onclick="myFunction()" class="dropbtn">Dropdown</button> -->
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>

  function myFunction() {
    const dropdown = document.getElementById('myDropdown') 
    dropdown.classList.toggle('show')
  }

  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.hamburger')) {
      var dropdowns = document.getElementsByClassName('dropdown-content')
      var i
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i]
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show')
        }
      }
    }
  }
</script>

Como você pode ver eu comentei no botão, eu não sei por que você iria usar ambos, o botão eo botão hamburguer. Também acrescentou alguns estilos para a barra'; divs, caso contrário, você não viu qualquer 'hamburguer'.

Por último mudar a coisa que você está combinando o ouvinte de eventos janela para ver se ele contém a classe 'hamburger'.

Respondeu 03/12/2019 em 14:27
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more