(HTML, CSS, JS) Essayer d'ajouter cliquable Dropdown, bouton icône

voix
0

J'ai fait icône « hamburger » sur mon site Web barre de navigation. J'ai ajouté JavaScript animation simple, il fonctionne très bien. Maintenant, je veux l'icône pour ouvrir cliquable Dropdown, je suis un peu confus depuis que je suis déjà un fichier de script, et la classe.

Je ne sais pas comment puis-je combiner deux codes JS à la même classe, et comment modifier les liens avec les barres déroulant de l'icône d'origine ..

ceci est mon icône: 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);
}

Enfin, c'est le menu déroulant, je suis en train d'ajouter:

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');
          }
        }
      }
    }
Créé 03/12/2019 à 00:01
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Vous pouvez utiliser la même fonction pour les deux éléments. Je pense que les principaux problèmes est que vous faites la chute vers le bas disparaissent lorsque vous cliquez dessus à l'extérieur. Ce « extérieur » comprend l'icône du menu hamburger.

Voici un exemple de travail:

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

Créé 03/12/2019 à 07:59
source utilisateur

voix
0

J'ai essayé cette solution, espère que cela fonctionne pour vous:

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

Comme vous pouvez le voir, je commentais le bouton, je ne sais pas pourquoi vous utilisez à la fois, le bouton et le bouton hamburguer. On a aussi ajouté quelques styles à la barre »; divs, sinon vous ne voyaient pas « hamburguer ».

Enfin changer la chose que vous êtes correspondant à l'écouteur d'événement de la fenêtre pour voir si elle contient la classe « hamburger ».

Créé 03/12/2019 à 14:27
source utilisateur

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