Multi-level Dropdown Menu With Pure JavaScript – tidy-menu

tidy-menu is a small and zero-dependency JavaScript library for creating horizontal & vertical multi-level dropdown menus with CSS3 animations.

How to use it:

Load the required files for the tidy menu.

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

The html structure to generate a horizontal dropdown menu from nested html lists as shown below:

<ul class="Menu -horizontal">
  <li class="-hasSubmenu -noChevron"> <a href="#" data-icon="apps"></a>
    <ul>
      <li><a href="#">Bacon</a></li>
      <li><a href="#">Ipsum</a></li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Amet</a></li>
    </ul>
  </li>
  <li class="-hasSubmenu"> <a href="#">Alpha</a>
    <ul>
      <li><a href="#">Bacon</a></li>
      <li><a href="#">Ipsum</a></li>
      <li class="-hasSubmenu"> <a href="#">Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Amet</a></li>
      <li class="-hasSubmenu"> <a href="#">Another Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li class="-hasSubmenu"> <a href="#">Sub-sub-menu!</a>
            <ul>
              <li><a href="#">Bacon</a></li>
              <li><a href="#">Ipsum</a></li>
              <li><a href="#">Dolor</a></li>
              <li><a href="#">Amet</a></li>
            </ul>
          </li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Beta</a></li>
  <li class="-hasSubmenu"> <a href="#">Gamma</a>
    <ul>
      <li><a href="#" data-icon="">Ipsum</a></li>
      <li class="-hasSubmenu"> <a data-icon="cast" href="#">Dolorsssssssssssssssssssssssss</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
      <li><a href="#" data-icon="">Amet</a></li>
      <li><a href="#" data-icon="cake">Tail pork loin chicken</a></li>
      <li><a href="#" data-icon="">Bacon ipsum dolor amet pork loin rump filet mignon swine</a></li>
    </ul>
  </li>
  <li><a href="#">Delta</a></li>
  <li><a href="#">Epsilon</a></li>
</ul>

The html structure to generate a vertical dropdown menu from nested html lists as shown below:

<ul class="Menu -vertical">
  <li><a href="#">Bacon</a></li>
  <li><a href="#">Ipsum</a></li>
  <li class="-hasSubmenu"> <a href="#">Dolor</a>
    <ul>
      <li><a href="#">Bacon</a></li>
      <li><a href="#">Ipsum</a></li>
      <li class="-hasSubmenu"> <a href="#">Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
      <li><a href="#">Dolor</a></li>
      <li><a href="#">Amet</a></li>
      <li class="-hasSubmenu"> <a href="#">Another Sub-menu</a>
        <ul>
          <li><a href="#">Bacon</a></li>
          <li><a href="#">Ipsum</a></li>
          <li class="-hasSubmenu"> <a href="#">Sub-sub-menu!</a>
            <ul>
              <li><a href="#">Bacon</a></li>
              <li><a href="#">Ipsum</a></li>
              <li><a href="#">Dolor</a></li>
              <li><a href="#">Amet</a></li>
            </ul>
          </li>
          <li><a href="#">Dolor</a></li>
          <li><a href="#">Amet</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Amet</a></li>
</ul>