Responsive Multi-level Dropdown Menu With JavaScript And CSS – ozmenu.js

Preview:

Description:

A modern, clean, responsive, multi-level dropdown menu written in vanilla JavaScript and CSS.

The key feature of this dropdown menu is that it can automatically convert into an off-canvas side navigation on mobile devices, ensuring your website or web app remains easy to navigate and use on any device.

In addition, the menu supports multiple levels of dropdown items, which is great for content-rich websites with complex navigation structures.

How to use it:

1. Load the necessary JavaScript and Stylesheet in your document.

<link rel="stylesheet" href="style.css" />
<script src="ozmenu.js"></script>

2. The required HTML structure for the menu.

<!-- Mobile Toggle Menu -->
<div class="menu-open">
  <span class="open"></span>
</div>
<!-- ozmenu -->
<div class="ozmenu">
  <div class="menu-close"><span class="close"></span></div>
  <ul class="ozmenu-nav">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item dropdownitem">
      <a href="#" class="nav-dropdown">Services</a>
      <div class="dropdown">
        <ul>
          <li class="item"><a href="#">Software</a></li>
          <li class="item"><a href="#">Server Maintenance</a></li>
          <li class="item dropdownitem">
            <a href="#" class="nav-dropdown">Web Hosting</a>
            <div class="dropdown">
              <ul>
                <li class="item"><a href="#">Linux Hosting</a></li>
                <li class="item"><a href="#">Windows Hosting</a></li>
              </ul>
            </div>
          </li>
          <li class="item"><a href="#">Graphic Design</a></li>
        </ul>
      </div>
    </li>
    <li class="item dropdownitem">
      <a href="#" class="nav-dropdown">Web Design</a>
      <div class="dropdown">
        <ul>
          <li class="item"><a href="#">Corporate Web Design</a></li>
          <li class="item dropdownitem">
            <a href="#" class="nav-dropdown">E-Commerce</a>
            <div class="dropdown">
              <ul>
                <li class="item"><a href="#">Ready E-Commerce</a></li>
                <li class="item"><a href="#">Custom E-Commerce</a></li>
              </ul>
            </div>
          </li>
          <li class="item dropdownitem">
            <a href="#" class="nav-dropdown">Personal Web Design</a>
            <div class="dropdown">
              <ul>
                <li class="item"><a href="#">Blog Site</a></li>
                <li class="item"><a href="#">Portfolio Site</a></li>
                <li class="item"><a href="#">Custom Personal Site</a></li>
              </ul>
            </div>
          </li>
          <li class="item"><a href="#">Custom Web Design</a></li>
          <li class="item"><a href="#">Onepage Web Design</a></li>
        </ul>
      </div>
    </li>
    <li class="item dropdownitem">
      <a href="#" class="nav-dropdown">Help</a>
      <div class="dropdown">
        <ul>
          <li class="item"><a href="#">Mail Settings</a></li>
          <li class="item"><a href="#">Hosting Selection</a></li>
          <li class="item"><a href="#">Admin Panel</a></li>
        </ul>
      </div>
    </li>
    <li class="item"><a href="#">Contact</a></li>
  </ul>
</div>