Press "Enter" to skip to content

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.

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 on your laptop.

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

Multi-Level-Dropdown-Menu-Demo


See Demo And Download

Official Website(piotr-kmita): Click Here

This superior jQuery/javascript plugin is developed by piotr-kmita. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.