A Responsive Multi-Level Dropdown Menu With Vanilla JavaScript

Dropdown Menu is a vanilla JavaScript library that facilitates the creation of responsive, mobile-friendly, and multi-level dropdown menus for the cross-platform web app navigation bar.

Features:

• Babel
• Autoprefixing with PostCss
• Development server
• Optimization for production

Must Read - Generate WCAG Accessible Dropdown Menus Using JavaScript

How to make use of it:

1. Download and set up the package.

npm install

2. To take a look at the script, simply start the dev server.

npm run start

3. Generate files for manufacturing.

npm run build

4. Insert the primary.css and principal.js from the dist folder.

<link rel="stylesheet" href="dist/main.css" />
<script src="dist/main.js"></script>

5. Insert the multi-level dropdown menu into your header navigation.

<header>
  <div class="nav__container">
    <div class="nav__mobile">
      <div class="nav__logo">LOGO</div>
      <div class="nav__btn">
        <a aria-label="Mobile menu" class="nav-toggle fade"><span></span><span class="mrg"></span><span class="mrg"></span></a>
      </div>
    </div>
      <nav class="menu-toggle">     
        <ul class="nav__menu">
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
          <li class="dropdown"><a href="#">Dropdown</a>
            <ul>
              <li><a href="">Dropdown item 1</a></li>
              <li><a href="">Dropdown item 2</a></li>
              <li><a href="">Dropdown item 3</a></li>
              <li class="dropdown second-level"><a href="#">2nd level dropdown</a>
                <ul>
                  <li><a href="">Dropdown item 1</a></li>
                  <li><a href="">Dropdown item 2</a></li>
                  <li><a href="">Dropdown item 3</a></li>
                </ul>
              </li>
              <li><a href="">Dropdown item 3</a></li>
              <li><a href="">Dropdown item 4</a></li>
            </ul>
          </li>
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
          <li><a href="">Menu item</a></li>
        </ul>   
      </nav>
  </div>
</header>

Responsive Multi-level Dropdown Menu For Navbar, Dropdown Menu Plugin/Github

Must Read - Responsive Flat Horizontal Dropdown Menu With jQuery

See Demo And Download