How to add jQuery dropdown menus to Drupal menu

Everyone loves those amazing dropdown menu animations that only jQuery seems to be able to spit out these days.  The problem is most tutorials on the net assume you can modify your menu code at will. With Drupal, we have our menus generated for us and therefore, adjusting the code to add or remove a tag here or there just isn't possible.  For those of you who have struggled with adding jQuery animations to your Drupal menus, here's your solution.

My set up:

• Drupal 6
• Menu Block module (optional)

1. Set up the CSS

   • To start with, you need to set up your css.  I'm going to give a VERY basic example but it's what is absolutely necessary to make this work.
   • Set your menu you want to appear to display:none.
     • If your menu appears in #topmenu region, then CSS should look something like this:
       • #topmenu ul li ul {display: none;}
   • Do NOT set a hover CSS property to make it appear. The jQuery will do that for us.

2. Update jQuery to 1.4.4

   • We need to update the version of jQuery Drupal uses. Add this code to your page template files (page.tpl.php)

     • <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
       <script type="text/javascript">
         	var $jq = jQuery.noConflict();  
         </script>
       

3. Add jQuery code to template

   • Add this code to the HEAD section of your template (page.tpl.php)

     • <script type="text/javascript">
       $jq(document).ready(function () {
       	
       	$jq('.topmenu ul li').hover(
       		function () {
       			//show its submenu
       			$jq('ul', this).fadeIn(250);
       
       		}, 
       		function () {
       			//hide its submenu
       			$jq('ul', this).delay(200).fadeOut(250);
       		}
       	);
       
       });
       	</script>
       

     • You need to at this time change ".topmenu ul li" to match your page layout. Most likely, all you need to do is change .topmenu to match whatever CSS class of the div that contains your menu
4. Go into your Drupal menus and expand the menus you want to appear (admin/build/menu). I prefer to use the Menu Block module to do this for me, but whatever floats your boat.

That's it! You should be good to go.  Hover over you menu and the submenu should appear!