I am making a website about trains and want to optimize it for phones. I want to make it so when i click on the button shown in the html code it shows the elements inside the div with a class mobile-phone-nav-bar. I got the button working but when i added image i saw that if i click on it it doesn’t work. How can i make it so when i click on the image it operates like the button and shows the elements inside the div.
function Menu() {
document.getElementById("phone-nav-bar").classList.toggle("show-nav-bar");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.menu-button')) {
var navBar = document.getElementById("phone-nav-bar");
if (navBar.classList.contains('show-nav-bar')) {
navBar.classList.remove('show-nav-bar');
}
}
}
.mobile-phone-nav-bar{
display:none;
}
.show-nav-bar{
display: flex;
flex-direction: column;
}
<div class="menu-toggle">
<button class="menu-button" onclick="Menu()"><img src="assets/images/menu.png"></button>
<div class="mobile-phone-nav-bar" id="phone-nav-bar">
<a class="nav-button" href="index.html">Начало</a>
<div class="train-dropdown">
<button onclick="TrainDropdown()" class="dropdown-button">Влакове</button>
<div id="trains" class="train-elements">
<a id="first-element" href="#">Link 1</a>
<a href="#">Link 2</a>
<a id="last-element" href="#">Link 3</a>
</div>
</div>
<a class="nav-button" href="#contacts">Контакти</a>
<a class="nav-button" href="#aboutme">Повече за мен</a>
</div>
</div>
You need to sign in to view this answers
Leave feedback about this