Expression Engine and Suckerfish Menu

published on Mar 27th, 2006 // 8 Comments


This tutorial quickly integrates Expression Engine with Son of Suckerfish Dropdowns the more accessible, lighter and compatible menu than the original menu published at A List Apart.

This is a very linear tutorial and I will not be going into the workings of the menu or EE. If you have any questions please use our forums.

Thanks to Patrick Griffiths and Dan Webb for their work and permission to publish this.

Vertical Menu

Download these files


  • Copy & paste suckerfish_vertical.txt into the index template of whichever weblog you are adding the menu to.
  • Update master_weblog_name variable at top of template.
  • Create a new template in your group called menu. Set its type to Javascript.
  • Now in here copy & paste suckerfish_vertical.js and save.
  • Copy & paste suckerfish_vertical.css into your weblog_css template.

Horizontal Menu

Basically you just replace your weblog_css with the horizontal version.suckerfish_horizontal.css

That is all there is too it. You can see how the menu is structured within the index template, adding the relevant EE code to populate the lists. The lads do a nice job of making it look pretty on their site here



Andy White says:

You know, it amazes me how generous some people are with their time. I wanted to take a moment to say thank you for taking the trouble to help people like me find our way through EE.

So far, this and your Slideshow Pro tutorial have saved me hours of head scratching and frustration. So thanks!

gravatar icon

Noregt says:

Discovered your tutorial after I had it already working, wish I had seen it before!!! Still, I used it to do some tweaking, so it came in handy after all!

implemented a horizontal version at:

gravatar icon

Editor says:

Looks good Norget!

gravatar icon

Troy says:

I’ve implemented the horizontal version. Very nice.

gravatar icon

Bob says:

Hmmm, I can’t seem to get this to work in EE. I was going to ask a question in the forums as the tutorial suggests, but could not locate them. Anyway, I cannot get the dropdowns to display any way but vertically (even with the horizontal CSS) and the “main menu” of my site does not display, only a single box named “Categories.” I am trying to get a look similar to the one shown in but using EE to populate my lists. Is there a place on this site where I can go to ask these questions?


gravatar icon

Editor says:

Bob, sorry the forum was in an older version of the site. You can send me an email or you can post the link to the page in question here or the easiest way is to make a new thread in the EE forums and let me know the link

gravatar icon

Bob says:

Hey, just thought I’d let you know I got the Suckerfish/EE dropdown working smoothly based on this tutorial. Thanks for putting this together! I had to get my mind around using Weblogs as the anchors in the Main Nav Bar. Now it works well and the stylesheet was easy enough to tweak for my site. Thanks again, John.

gravatar icon

DOM-2000 says:

Horizontal implementation looks really fine

gravatar icon
Commenting is not available in this section entry.