Add a Fancy jQuery Drop Down Menu in Thesis using Superfish

To create drop down menus in Thesis, you just add pages and assign a parent page to them. Then enable them in the Thesis options and voilà, you have a drop down menu. But what if you want to integrate some sort of fancy jQuery to the drop down menu so when you hover over the parent page, the list of child pages, or the sub menu, fades in elegantly. Well, here’s one solution.

For this tutorial, I’m using the Superfish menu jQuery plugin as I’ve used this before and is really easy to get working. Note that this tutorial is based off of version 1.4.8. Superfish is an enhanced Suckerfish-style menu jQuery plugin.

Step 1: Download the plugin

Visit this Superfish download page and download the zip file that contains all the files. I’m going to go through a basic installation, but you’re welcome of course to read more about the features on the Superfish website. The way I’m setting it up is based off the sample setup.

Step 2: Copy the files

For the basic installation which will result in a really nice, smooth jQuery drop down menu, copy these files into a folder called “js” in your custom folder inside the main Thesis folder:

• hoverIntent.js
• superfish.js

Now place this file in a folder called “css”, also inside the custom folder in your main Thesis theme folder:

• superfish.css

Finally, copy all the images that appear in the “images” folder into your images folder inside your Thesis custom folder.

Step 3: Add the code

Now that you’ve copied over the necessary files, you need to reference them. Paste this code into your custom-functions.php file:

function superfish() {
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<!-- superfish jquery menu -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/hoverIntent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/superfish.js"></script>

<script type="text/javascript">

	// initialise plugins
	jQuery(function(){
		jQuery('ul.menu').superfish();
	});

</script>

<?php
}

add_action('thesis_hook_after_html','superfish');

And you’ll need to add this code to load the custom Superfish stylesheet. Add the following to the custom-functions.php file:

/* superfish stylesheet */
function superfish_stylesheet() {
?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/custom/css/superfish.css" media="screen">
<?php
}

add_action('wp_head','superfish_stylesheet');

You’re Done!

Believe it or not, that’s it. The plugin takes care of the rest. I’d recommend that you look at some of the settings available to you that reside inside the superfish.js file around line #85. You can enable or disable certain features like shadows and arrows and also set the delay of the sub menu.

Let us know how it worked out for you in the comments!

Tagged as: thesis menu, thesis tips