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

Category: Javascript , Menu & Navigation | November 30, 2016
Author: dylanh333
Views Total: 5,678
Official Page: Go to website
Last Update: November 30, 2016
License: MIT

Preview:

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

Description:

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>

 

You Might Be Interested In:


3 thoughts on “Multi-level Dropdown Menu With Pure JavaScript – tidy-menu

  1. Manuel Pimentel

    I like your menu.
    i want to make the menu dynamic loading it in ajax with jquery,
    I am not an expert. what shoud I do to be able to rerun the script and have the menu updated and working?
    tia
    Manuel Pimentel

    Reply
  2. Robert

    Is there an option to have the menus drop down on hover as opposed to on click?

    Reply
    1. Rana

      Is there an option to have the menus drop down on hover as opposed to on click?

      Reply

Leave a Reply