Having trouble creating a dropdown menu on click? Check out the real site I'm working on: . The menu turns into a single button under 736px width, but it's buggy on mobile devices. When clicked on a phone, it automatically redirects to the last button's "href" even if it's not visible. Also, the menu doesn't close after clicking the "home" button again.
I want to create a drop-up menu that stays in place when you click the button (instead of moving up like it does now) until clicked again. Any advice would be appreciated!
CODE:
<div class="navbar" id="myTopnav">
<div class="dropup">
<a href="javascript:void(0);" class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" /> </a>
<div class="dropup-content" >
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<a href="#news"> <img src="images/Icons/about.png" /> News</a>
<a href="#contact"> <img src="images/Icons/info.png" /> Contact</a>
<a href="#home"> <img src="images/Icons/menu.png" /> Home</a>
<a href="#news"> <img src="images/Icons/pic.png" /> Newssssssssssss</a>
<a href="#contact"> <img src="images/Icons/about.png" /> Contact</a>
</div>
</div>
</div>
SCRIPT (revised script to address the issue with closing from a mobile device):
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
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');
}
}
}
}