Press "Enter" to skip to content

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.

responsive multi level dropdown menu, multi level dropdown menu responsive, multi level dropdown menu responsive css, responsive drop down menu with submenu javascript, responsive drop down menu with submenu

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, create a basic navbar with a dropdown and search bar it also should be responsive bootstrap, 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.