(HTML, CSS, JS) Proberen om Clickable Dropdown toe te voegen, pictogramknop

stemmen
0

Ik maakte icoon hamburger op mijn website navigatiebalk. Ik voegde eenvoudige animatie JavaScript, het werkt geweldig. Nu wil ik het pictogram om Clickable Dropdown openen, ben ik een beetje in de war want ik ben al met behulp van script, en klasse.

Ik ben niet zeker hoe kan ik een combinatie van twee JS code om dezelfde klasse, en hoe om te bewerken het dropdown banden met de oorspronkelijke icoon bars ..

dit is mijn Icon: 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);
}

Tenslotte is dit de dropdown ik probeert toe te voegen:

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');
          }
        }
      }
    }
De vraag is gesteld op 03/12/2019 om 00:01
bron van user
In andere talen...                            


2 antwoorden

stemmen
1

U kunt dezelfde functie te gebruiken voor beide elementen. Ik denk dat de belangrijkste problemen is dat u de daling te maken naar beneden verdwijnen wanneer erop wordt geklikt daarbuiten. Deze "buiten" omvat de hamburger menu icoon.

Hier is een werkend voorbeeld:

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

antwoordde op 03/12/2019 om 07:59
bron van user

stemmen
0

Ik heb geprobeerd deze oplossing, hoop dat het werkt voor u:

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

Zoals je kunt zien dat ik uitgecommentarieerd op de knop, ik weet niet waarom jullie beiden, de knop en de hamburguer knop zou gebruiken. Ook toegevoegd sommige stijlen aan de 'bar; divs, anders zag geen 'Hamburguer'.

Ten slotte is het ding dat je komen te passen op het raam evenement luisteraar om te zien of het de 'hamburger' klasse bevat veranderen.

antwoordde op 03/12/2019 om 14:27
bron van user

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