(HTML, CSS, JS) Megpróbálom felvenni kattintható Dropdown, ikon gomb

szavazat
0

Csináltam „hamburger” ikonra a honlapomon navigációs sávon. Én hozzá egyszerű animáció JavaScript, remekül működik. Most azt akarom, az ikonra kattintható Dropdown, én kicsit zavaros, mert én már a script fájlt, és az osztály.

Nem vagyok benne biztos, hogy tud én össze két JS kódot, azonos osztályú, és hogyan kell szerkeszteni a legördülő kapcsolatokat az eredeti ikonsávjai ..

ez az én ikon: 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);
}

Végül ez a legördülő igyekszem hozzá:

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');
          }
        }
      }
    }
A kérdést 03/12/2019 00:01
a forrás felhasználó
Más nyelveken...                            


2 válasz

szavazat
1

Használhatja ugyanazt a funkciót mindkét elemet. Azt hiszem, a fő kérdés az, hogy te, hogy a legördülő eltűnnek, ha rákattint kívül. Ez a „kívül” kifejezés magában foglalja a hamburger menü ikont.

Itt egy működő példa:

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

Válaszolt 03/12/2019 07:59
a forrás felhasználó

szavazat
0

Próbáltam ezt a megoldást, remélem, hogy működik az Ön számára:

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

Amint láthatjuk azt nyilatkozta ki a gombot, nem vagyok benne biztos, hogy miért lenne mindkettőt használja, a gomb és a hamburguer gombot. Is hozzá néhány stílus a „bar; divs, különben nem lát „hamburguer”.

Végül módosítsa a dolog, amit illő az ablakon esemény hallgató, hogy ha ez tartalmazza a „hamburger” osztály.

Válaszolt 03/12/2019 14:27
a forrás felhasználó

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