Simple drop down menu button

Question

I'm trying to combine the drop down button found here Dropdown button with the menu icon found here Menu icon . The animation would be nice to keep but is not the priority. In my attempt I simply replaced the "Dropdown" text with the divs from the menu icon example, ie from this:

<button onclick="myFunction()" class="dropbtn">Dropdown</button>

to this:

<button onclick="myFunction()" class="dropbtn">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</button>

and of course added the css classes. Now, the problem is that the bars inside the button are no longer clickable (At least not in Chrome. Firefox seems to work fine). I've tried to add onclick="myFunction()" to the divs aswell but to no avail.

Any tips?

Answer 1

Here is the working fiddle for the same: https://jsfiddle.net/w5qftsgm/

I used a single function for both dropdown and bars which is written below:

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

Please feel free to ask if you have any queries

Answer 2

Content inside the button tag is for visual purposes only.

All interactivity inside is strictly limited to the button itself.

Therefore you should have the bars on the same level as the button.

<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div class="dropbtn">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>

Answer 3

if you need dropdown, i recommend change your code, for ex

 function myFunc(e){ console.log(e.target) } document.getElementById("button").addEventListener("click",myFunc)

 <div id="button" class="dropbtn"> <button class="bar1">1</button> <button class="bar2">2</button> <button class="bar3">3</button> </div>

Answer 4

Don't use a button with div's in it. Try this solution from W3schools:

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Here you have a live demo: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

Answer 5

use an anchor tag and style it you can use an anchor tag without a href and make sure you are using a high z-index

ie <a style='z-index:999;'>bars go here</a>

Answer 6

I created fiddle for you. First you have to style your bars. Then you need to create function that will add or remove show class in order to display your content. Something like that:

const btn = document.querySelector('.dropbtn');
const content = document.querySelector('.content');
btn.addEventListener('click', function() {
    if(!content.classList.contains('show')) {
    content.classList.add('show')
  }
  else {
    content.classList.remove('show')
  }
})

Here you have styles:

.bar {
 width:20px;
 height:3px;
 background:black;
 margin: 2px;
}
.content {
  width:100px;
  height:200px;
  background:gray;
  display:none;
}
.content.show {
  display: block;
}

https://jsfiddle.net/ajp02uby/

Answer 7

this is your HTML

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

And your script

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(x) {
x.classList.toggle("change");
  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');
      }
    }
  }
}

And CSS goes here

.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;}
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

Please consider changing the div inside the button to some inline elements like span. In HTML try to avoid using of block elements inside inline elements.