Bdtjtk

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

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>

if you need dropdown, i recommend change your code, for e.x.

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>

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

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>

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/

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.