jQuery dropdown sliding for css menus using display none on ul tags
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
demo.html
jquery.dripdrop.js
jquery.dripdrop.min.js

README.md

dripdrop

jQuery dropdown sliding for css menus using display none on ul tags. For example the following would apply the effect to the below html navigation.

However, CSS should be in place using meyerweb's example (http://meyerweb.com/eric/css/edge/menus/demo.html). This is the foundation for the effect using CSS only.

$('selector').dripdrop(openOptions, openSpeed, closeOptions, closeSpeed);

Parameters:

  • openOptions, a JSON obj with the animation settings you want. These will result when the menu item is moused over.
  • openSpeed, an INT value in milliseconds you want. This is the speed of the animation.
  • closeOptions, a JSON obj with the animation settings you want. These will result when the menu item is moused off of.
  • closeSpeed, an INT value in milliseconds you want. This is the speed of the animation.

Example

Here is a real world example:

jQuery(document).ready(function() {
    jQuery('#nav').dripdrop({width: "toggle"}, 500);
});
<nav id="nav">
    <ul>
        <li><a href="#">Home</a>
          <ul>
            <li><a href="#">Child Page</a></li>
            <li><a href="#">Example Link</a></li>
          </ul>
        </li>
        <li><a href="#">Templates</a></li>
    </ul>
</nav>
li ul {display: none;}
li:hover > ul {display: block;}