Smooth, nested drop down menus from semantic markup. Simple integration, limited flexibility – you’ll either love it or hate it.
Quick and dirty nested drop-down menu in the jQuery styleee. 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

No mandatory configuration options or nothin’ here, just use include the Javascript/CSS resources and insert the following code in your document head, or any other suitable place:
Javascript:

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

And here’s some example HTML markup:
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> 

Droppy supports a single configuration option, speed, for setting the animation time.
Example with custom speed:

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

The example CSS file has been split up into three small sections for ease of customisation if you feel like getting your tinker on. As of version 0.1.2, the ‘hover’ CSS class is applied to both < li > and < a > tags inside the menu on rollover, improving skinability with IE6.

Demo: http://onehackoranother.com/projects/jquery/droppy/
Download: http://plugins.jquery.com/files/droppy-0.1.2.zip
Source: http://onehackoranother.com/projects/jquery/droppy/

Related Listings:

1. nmcDropDown: A Drop-Down Menu Plugin for jQuery Usage You should create your navigation as a nested unordered...
2. Lightweight Portal Framework using jQuery Netvibes enables individuals to assemble their favorite widgets on the...
3. JPolite – Ajax Lightweight Portal Framework JPolite is a Lightweight Portal Framework based on jQuery –...
4. Horinaja for proptotype/scriptaculous or jQuery Horinaja is a slide-show ready-to-use for scriptaculous/prototype or jQuery. you...
5. CrossSlide Jquery Slideshow CrossSlide is a jQuery plugin that implements in Javascript some...

Do you like this post?

Email: