Responsive Single-level Dropdown Menu With JavaScript

Preview:

Description:

Yet another responsive single-level dropdown navigation that works perfectly on both desktop and mobile.

In mobile view, you will see the dropdown menu is collapsed into a hamburger button, which enables the visitor to toggle the navigation just like an off-canvas menu.

How to use it:

1. The dropdown menu requires the ionicons for the expand/collapse/hamburger icons.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.1/collection/components/icon/icon.min.css" />

2. Code the HTML for the dropdown menu.

<header class="header">
  <div class="container">
    <section class="wrapper">
      <h1><a href="#" class="brand">Brand</a></h1>
      <button type="button" class="opened-menu">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </button>
      <div class="overlay"></div>
      <nav class="navbar">
        <button type="button" class="closed-menu">
        <img src="./asset/closed.svg" class="closed-icon" alt="closed">
        </button>
        <ul class="menu">
          <li class="menu-item"><a href="#">Home</a></li>
          <li class="menu-item"><a href="#">About</a></li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Services<i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Web Design</a></li>
              <li class="menu-item"><a href="#">Web Development</a></li>
              <li class="menu-item"><a href="#">Brand Marketing</a></li>
              <li class="menu-item"><a href="#">SEO and Optimizing</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Planning <i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Basic Plan</a></li>
              <li class="menu-item"><a href="#">Standard Plan</a></li>
              <li class="menu-item"><a href="#">Premium Plan</a></li>
              <li class="menu-item"><a href="#">Professional Plan</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Article <i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Article One</a></li>
              <li class="menu-item"><a href="#">Article Two</a></li>
              <li class="menu-item"><a href="#">Article Three</a></li>
            </ul>
          </li>
          <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
      </nav>
    </section>
  </div>
</header>

3. Load the main JavaScript and stylesheet in the document. That’s it.

<link rel="stylesheet" type="text/css" href="./css/style.min.css" />
<script src="./js/script.js" defer></script>