Responsive Multi-level Dropdown Menu For Navbar

Category: Image | October 20, 2020
Author: piotr-kmita
Views Total: 109 views
Official Page: Go to website
Last Update: October 20, 2020
License: MIT

Preview:

Responsive Multi-level Dropdown Menu For Navbar

Description:

A Vanilla JavaScript library that makes it easier to create responsive, mobile-friendly, multi-level dropdown menus for the navbar of your cross-platform web app.

It provides a great navigation experience on mobile by collapsing the menu into a hamburger button. As a result, mobile users can easily browse all menu items by tapping the button & dropdown icon.

How to use it:

1. Download and install the package.

npm install

2. To test the script, just start the dev server on your computer.

npm run start

3. Generate files for production.

npm run build

4. Insert the main.css and main.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>

You Might Be Interested In:


Leave a Reply