Author: | dylanh333 |
---|---|
Views Total: | 17,102 views |
Official Page: | Go to website |
Last Update: | November 30, 2016 |
License: | MIT |
Preview:

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>
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
Is there an option to have the menus drop down on hover as opposed to on click?
Is there an option to have the menus drop down on hover as opposed to on click?