jQuery drop down menu: droppy

Quick and dirty nested drop-down menu in the jQuery style. I needed a nav like this for a recent project and a quick Googling turned up nothing that really suited, so droppy was born. It hasn’t been designed with flexibility in mind – if you like what you see, great, integration should be a breeze – otherwise I’d look for something more configurable elsewhere.

Usage:
Javascript:

<script type='text/javascript'>
  $(function() {
    $('#nav').droppy();
  });
</script>

HTML:

<ul id='nav'>
  <li><a href='#'>Top level 1</a></li>
  <li><a href='#'>Top level 2</a>
    <ul>
      <li><a href='#'>Sub 2 - 1</a></li>
      <li>
        <a href='#'>Sub 2 - 2</a>
        <ul>
          <li>
            <a href='#'>Sub 2 - 2 - 1</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
            </ul>
          </li>
          <li><a href='#'>Sub 2 - 2 - 2</a></li>
          <li>
            <a href='#'>Sub 2 - 2 - 3</a>
            <ul>
              <li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
              <li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href='#'>Sub 2 - 3</a></li>
    </ul>
  </li>
</ul>

With Custom Speed:

<script type='text/javascript'>
  $(function() {
    $('#nav').droppy({speed: 100});
  });
</script>

Country State City Drop Down in jQuery, AJAX

Dynamically Dependent country state city drop down box using jQuery, Ajax and PHP: This is commonly …

AJAX Post With jQuery and PHP

AJAX stands for Asynchronous JavaScript and XML. AJAX Post used to create faster, and more interacti…

How a Loop Through a JavaScript Object?

How a Loop through a JavaScript object?Javascript Objects are Variables Containing Variables.In Java…

How to Search Item in List in JavaScript

Multi Step Form Using HTML and JavaScript

Form is the important part in web design. Form is the primary interface to the user by which user is…

How to Create Custom CSS, jQuery Autocomplete Plugin

Web developers often use autocomplete features in websites as a part of their work. Yet lot of good …