Currently, I'm working on creating a responsive dropdown navigation bar using vanilla JavaScript. My goal is to have only one dropdown menu open at a time when clicked in mobile view. Here's the JavaScript code snippet:
dropbtns.forEach(link => {
link.addEventListener("click", function(e) {
e.currentTarget.nextElementSibling.classList.toggle("showdd");
});
});
This code snippet will toggle the visibility of the dropdown menu:
.showdd {
height: auto;
}
Below is the HTML code structure for the navigation bar:
<div class="nav-container">
<div class="brand">
<a href="#!">Logo</a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul id="nav-list">
<li>
<a href="#!">Home</a>
</li>
<li>
<a href="#!">About</a>
</li>
<li class="dropdown">
<a href="#!" class='dropbtn'>Services <i class="fas fa-sort-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#!">Web Design</a>
</li>
<li>
<a href="#!">Web Development</a>
</li>
<li>
<a href="#!">Graphic Design</a>
</li>
</ul>
</li>
<li>
<a href="#!">Pricing</a>
</li>
<li class="dropdown">
<a href="#!" class='dropbtn'>Portfolio <i class="fas fa-sort-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#!">Web Design</a>
</li>
<li>
<a href="#!">Web Development</a>
</li>
<li>
<a href="#!">Graphic Design</a>
</li>
</ul>
</li>
<li>
<a href="#!">Contact</a>
</li>
</ul>
</nav>
</div>
You can access the full code here.