I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open:
mobile menu
If you tap on "Termine", it will reveal a submenu:
mobile menu with submenu
I want the submenu to close when "termine" is tapped for the second time, but I am unsure of how to achieve this.
This is the code that I have been working with:
<li class="nav-link">
<a href="#">Termine<i class="fas fa-caret-fown"></i></a>
<div class="dropdown">
<ul>
<li class="dropdown_link">
<a href="#" onclick="closeNav()">Regelmäßige Termine</a>
</li>
<li class="dropdown_link">
<a href="#" onclick="closeNav()">Besondere Termine</a>
</li>
<li class="dropdown_link">
<a href="#" onclick="closeNav()">Freizeiten</a>
</li>
</ul>
</div>
</li>
The CSS used to display the submenu is as follows:
.nav-link:hover > .dropdown {
display: block;
}
The Javascript function for "closeNav()" is defined as follows:
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}