Responsive Navbar Menu with Dropdown using Vanilla JavaScript

Responsive menu navigation with dropdown built with HTML5, CSS3 (including SASS), and Vanilla JavaScript. With that said, there’s another one-level responsive navigation that works perfectly on both desktop and mobile.

In the mobile view, you’ll see the dropdown menu collapsed into the hamburger button, allowing the visitor to toggle navigation just like an off-board menu.

How to make use of 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 primary JavaScript and stylesheet within the doc.

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

Responsive Single-level Dropdown Menu, Responsive Dropdown Menu Plugin/Github, responsive drop down menu with submenu template, responsive dropdown menu jquery


See Demo And Download

Official Website(syahrizaldev): Click Here

This superior jQuery/javascript plugin is developed by syahrizaldev. For extra Advanced usage, please go to the official website.

Share