Is there a way to make a png image display the drop down menu?-CodePudding

I am trying to make a drop-down menu by clicking on a png. I managed to make it work with text but when I try to replace it with img src="menubutton.png" as shown, the image appears to be clickable but the menu won't appear. I am new to this, am I missing something? Or maybe it just doesn't work like this?

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
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');
      }
    }
  }
}

.dropbtn {
  background-color: rgba(240, 159, 240, 0);
  color: rgb(255, 255, 255);
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #e98ebb3d;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f13b;
  min-width: 50px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.37);
  z-index: 1;
}

.dropdown-content a {
  color: rgba(0, 0, 0, 0.63);
  padding: 50px 50px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: rgba(221, 221, 221, 0.568);
}

.show {
  display: block;
}

<div >
  <button onclick="myFunction()" ><img src="../photos/menubutton.png"></button>
  <div id="myDropdown" >
    <a href="#home"><img src="../photos/music-notes.png"></a>
    <a href="#about">about</a>
    <a href="#contact">about</a>
  </div>
</div>

CodePudding user response：

Yes. It opens on click, but then closes it right away because of the window.onclick event handler. So just onclick="myFunction(); return false" will cancel its propagation.

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
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');
      }
    }
  }
}

<!DOCTYPE html>

<html lang="en">

<head>
  <style>
    .dropbtn {
      background-color: rgba(240, 159, 240, 0);
      color: rgb(255, 255, 255);
      padding: 16px;
      font-size: 16px;
      border: none;
    }
    
    .dropbtn:hover,
    .dropbtn:focus {
      background-color: #e98ebb3d;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: relative;
      background-color: #f1f1f13b;
      min-width: 50px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.37);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: rgba(0, 0, 0, 0.63);
      padding: 50px 50px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown a:hover {
      background-color: rgba(221, 221, 221, 0.568);
    }
    
    .show {
      display: block;
    }
  </style>
</head>

<body>
  <div >
    <button onclick="myFunction(); return false" ><img src="../photos/menubutton.png"></button>
    <div id="myDropdown" >
      <a href="#home"><img src="../photos/music-notes.png"></a>
      <a href="#about">about</a>
      <a href="#contact">about</a>
    </div>
  </div>

CodePudding user response：

In your example, you specify that the event.target.matches('.dropbtn') but when you are clicking on the image, that doesn't have the class .dropbtn on it, so it doesn't run the event.

If you were to change your button like this it will work.

<button onclick="myFunction()"><img src="../photos/menubutton.png" ></button>

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
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');
      }
    }
  }
}

.dropbtn {
  background-color: rgba(240, 159, 240, 0);
  color: rgb(255, 255, 255);
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #e98ebb3d;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f13b;
  min-width: 50px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.37);
  z-index: 1;
}

.dropdown-content a {
  color: rgba(0, 0, 0, 0.63);
  padding: 50px 50px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: rgba(221, 221, 221, 0.568);
}

.show {
  display: block;
}

<body>
  <div >
    <button onclick="myFunction()"><img src="../photos/menubutton.png" ></button>
    <div id="myDropdown" >
      <a href="#home"><img src="../photos/music-notes.png"></a>
      <a href="#about">about</a>
      <a href="#contact">about</a>
    </div>
  </div>
</body>

There are other ways to write the code, but this should get it going for you!