jdMenu Hierarchical Menu Plugin for jQuery

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications. View the feature list below to see if jdMenu is the solution for you.

jdMenu News

July 1st: Thank you for all of those who have contacted me regarding jdMenu. I'm in the process of switching jobs and adjusting to the birth of our first, a little girl Noel Joy born June 12th. In addition to these life changes, jdMenu has an update coming in the first week of August. Thank you for your patience and I appologize for the delay in my response!

jdMenu is available for use in all personal and/or commercial projects under both the MIT and GPL licenses. This means that you can choose the license that best suites your project and use it accordingly.

jdMenu 1.4.1 Released!

I've updated jdMenu to the 1.4.1 release which now includes an onAnimate setting as well as vertical support: jdMenu 1.4.1

jdMenu 1.4.0 Released!

Like all great software development practices the documentation is last to come. But for now, you can download it from Here

Features in jdMenu 1.3

  • Lightweight! Only 3KB Very lightweight and efficient code
  • Search engine friendly! Built on top of plain unordered lists (UL/LI) and links with no custom attributes
  • Accessible! Supports keyboard navigation and menu triggering when A (link) tags are used for menu items
  • Easily customizable and Themeable! Easily theme the menu based on a CSS stylesheet
  • AJAX supportive! jdMenu will unbind DOM events from the menu and re-bind. This allows you to change the DOM and not worry about memory leaks or events being bound multiple times! (This is important if you're going to reload your menu via AJAX or modify it dynamically)
  • IE compatible! jdMenu utilizes the wonderful bgiframe plugin to fix IE's embarassing issue of SELECT inputs appearing on top of menus. This solution also correctly works over SSL/HTTPS connections so your users aren't plagued by alerts.
  • Custom animations! jdMenu provides an
    onAnimate
    callback allowing for you to easily integrate your custom animations
  • Vertical menu support! jdMenu now supports vertical menus by using
    jd_menu_vertical
    in place of the
    jd_menu
    css class
  • Absolute & relative positioning support! jdMenu allows the menu to be positioned absolutely, relatively or statically

jdMenu 1.3.beta2 Demo

Examples / Getting Started

Basic 'Hello World' menu

$(function(){ $('ul.jd_menu').jdMenu(); }); ... $(function(){
$('ul.jd_menu').jdMenu();
});

...

<ul class="jd_menu jd_menu_slate">
<li><a class="accessible">Hello</a>
<ul>
<li><a href="http://www.google.com">World!</a></li>
</ul>
</li>
</ul>
// $(document).ready(...);
$(function(){
$('ul.jd_menu').jdMenu();
// Add menu hiding on document click
$(document).bind('click', function() {
$('ul.jd_menu ul:visible').jdMenuHide();
});
});

...

<ul class="jd_menu">
<li>Search Engines &raquo;
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="http://www.yahoo.com" target="_blank">Yahoo!</a></li>
<li><a href="http://www.altavista.com" target="_blank">AltaVista</a></li>
</ul>
</li>
<li>Google Products
<ul>
<li>Search &raquo;
<ul>
<li><a href="http://base.google.com" target="_blank">Base</a></li>
<li><a href="http://code.google.com" target="_blank">Code</a></li>
<li><a href="http://images.google.com" target="_blank">Images</a></li>
</ul>
</li>
<li><a href="http://www.gmail.com" target="_blank">GMail</a></li>
</ul>
</li>
</ul>

Download It Now

Release Date jQuery Version Description
  Filename Size
jdMenu 1.3.beta2 2007-02-25 1.1.2 Requires bgiframe & dimensions plugins
  Online Demo View an online demo of this version
  Submit Bug Report Submit any issues here
  jdMenu-1.3.beta2.zip 33.7KB Includes CSS and documentation as well as full source, packed source, jquery and the dimensions plugin. (meaning this has everything you need!)
jdMenu 1.2.1 2007-02-20 1.1.1 Requires dimensions plugin
  jdMenu-1.2.1.zip 17.8KB Includes jquery, plugins, jdMenu source, jdMenu packed and CSS. (Documentation is a little sparse)
  jquery.jdMenu.js 4.5KB  
  jquery.jdMenu.packed.js 3KB Compressed version of jquery.jdMenu.js
jdMenu 1.2 2007-01-26 1.1.1 Requires dimensions plugin
  jdMenu-1.2.zip 17.7KB Includes jquery, plugins, jdMenu source, jdMenu packed and CSS
  jquery.jdMenu.js 4.5KB  
  jquery.jdMenu.packed.js 3KB Compressed version of jquery.jdMenu.js
  jdMenu.css 1.6KB  
jdMenu 1.1 2006-12-29 1.0.1 Requires dimensions plugin
  jdMenu-1.1.zip 19.1KB Includes jquery, plugins, jdMenu source, jdMenu packed and CSS
  jquery.jdMenu.js 4.4KB  
  jquery.jdMenu.packed.js 2.9KB Compressed version of jquery.jdMenu.js
  jdMenu.css 1.8KB  
jdMenu 0.1 2006-06-12 < 1.0
  Online Demo View an online demo of this version
  jdMenu-0.1.zip 11.6KB A different codebase (more verbose) (Not supported anymore)

Support/Feedback

If you'd like to email me, you may do so using Out West Media's contact form