(एचटीएमएल, सीएसएस, जे एस) क्लिक करने योग्य ड्रापडाउन जोड़ने के लिए कोशिश कर रहा है, आइकन बटन

वोट
0

मैं अपनी वेबसाइट नेविगेशन पट्टी पर हैमबर्गर आइकन बनाया है। मैं सरल एनीमेशन जावास्क्रिप्ट कहा, यह बहुत अच्छा काम करता है। अब मैं आइकन क्लिक करने योग्य ड्रापडाउन खोलना चाहते हैं, मैं थोड़े के बाद से मैं पहले से ही स्क्रिप्ट फ़ाइल, और वर्ग का उपयोग कर रहा भ्रमित कर रहा हूँ।

मुझे यकीन है कि मैं कैसे एक ही कक्षा के लिए दो जे एस कोड गठजोड़ कर सकते हैं नहीं कर रहा हूँ, और संपादित करने के लिए कैसे मूल आइकन सलाखों के साथ लटकती लिंक ..

HTML: यह मेरा चिह्न है:

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

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

</div>

सीएसएस:

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

जावास्क्रिप्ट:

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

अंत में इस लटकती मैं जोड़ने की कोशिश कर रहा हूँ:

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>

सीएसएस:

    .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;}

जावास्क्रिप्ट:

    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');
          }
        }
      }
    }
03/12/2019 को 00:01
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

आप दोनों तत्वों के लिए एक ही समारोह का उपयोग कर सकते हैं। मुझे लगता है कि मुख्य मुद्दों है कि आप ड्रॉप डाउन कर गायब हो जाते हैं जब यह बाहर क्लिक किया। यह "बाहर" हैमबर्गर मेनू आइकन भी शामिल है।

यहाँ एक काम कर उदाहरण है:

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

03/12/2019 को 07:59
का स्रोत उपयोगकर्ता

वोट
0

मैं इस समाधान की कोशिश की, आशा है कि यह आप के लिए काम करता है:

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

जैसा कि आप देख सकते हैं मैं बटन पर टिप्पणी की, मुझे यकीन है कि तुम दोनों, बटन और hamburguer बटन क्यों प्रयोग करेंगे नहीं हूँ। इसके अलावा 'बार के लिए कुछ शैलियों जोड़ा गया; divs, अन्यथा आप किसी भी 'hamburguer' नहीं देखा।

अन्त में बात आप विंडो घटना श्रोता पर मिलान कर रहे हैं देखने के लिए अगर यह हैमबर्गर 'वर्ग में शामिल है बदल जाते हैं।

03/12/2019 को 14:27
का स्रोत उपयोगकर्ता

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