HELLO
I AM
JOHN

I've been breaking making websites for over 15 years.

Suckerfish Style Menus in Drupal 6.x

Posted on June 13, 2008 at 10:11 am

RSS 2.0

drupalI spent hours and hours hunting around for a simple solution to implementing suckerfish-style drop-down menus in Drupal 6. Lo-and-behold, I couldn’t find one. Every solution out there was overly complicated, and didn’t quite do what I wanted it to.

After a few hours of hacking around, this is the solution I came up with.

First I started up by setting up my menu structure. I went to Administer >> Site building >> Menus >> Primary Links, and set up my menu, setting up all the appropriate pages and their sub-pages directly beneath them. That was the easy part. Now for the rest…

First I setup my ‘suckerfish’ functions. I found a script online that emulated suckerfish style behavior using jquery. Since jquery is already built in to Drupal, this was easy enough to implement.

dfn_menus.js

Once thats done and saved, we also need to create a style sheet. I’ll paste mine here as a reference. You may want to change it to suit your preferences. Disclaimer: I chopped it up and removed bits that were not needed, since they applied to the theme and skin that I had applied. I may or may not have left remnants and/or removed something I shouldn’t have.

dfn_menus.css
* UPDATED 2009.02.17

Once you have both of those files saved into place, now its time to make the magic happen. Now navigate to your theme folder, wherever it might be (usually something like /sites/all/themes/) and open your page.tpl.php file. This is where we make our changes.

First we include our css and js files. Add the following somewhere in the head section:

page.tpl.php

Once that’s done, we actually have to make the menu print out. This is the way I did it. I commented out the line that prints the $primary_links variable, and replaced it with this:

page.tpl.php

What this does is loads the menu tree, and then strips out all the extra stuff I didn’t need, liks classes and id’s and the like – I just wanted the nested unordered lists. Once that’s done, it prints out the results. And that’s it. Simple right?

This may and most likely will require lots of css tweaking on your part. But its a solution that has worked for me, and hopefully will lead you in the right direction! Tested with Firefox 2+ and IE7. May or may not work well with older browsers.

Happy Coding!

~ digifuzz

Share

Written by

John is a web-developer by day, dashing, handsome, and death-defying super-hero by night. Based out of Silver Spring, MD, he does his best to make things do things other than the things they were supposed to on a daily basis, in the process, making the world a better place.

There are 50 comments.

Comment by Linda Hargrove

Thanks, digifuzz for this coding help. Works great in IE and FF but won’t show at all in Opera. Is there a fix or hack for Opera?

JUN23 2008 04:26:00
Comment by digifuzz

Hey Linda, I didn’t test it on Opera, but after some quick googling, I read that suckerfish style menus in opera are a bit quirky, specially if you don’t set a specific width to the li’s. So just for kicks, try applying a “width: 150px;” or whatever suits you better to the top-level li’s.

/* TOP LEVEL MENU ITEM */
.menu ul li {
float: left;
margin: 0;
padding: 0;
position: relative;
width: 150px;
}

I’ll do a little testing soon and let you know what I come up with.

~ digifuzz.

JUN23 2008 17:16:00
Comment by Linda Hargrove

Tried a width change and clear: both. Nothing changed. I’m considering changing to another CMS. Unfortunately.

JUN24 2008 05:37:00
Comment by digifuzz

Hmm, strange. I tested it in Opera, and – besides being placed a few pixels below where it displays on the other browsers – it seems to work fine. If you haven’t already completely ditched Drupal, could you explain exactly what does happen in your browser?

~ digi

JUN24 2008 20:11:00
Comment by sen

I got this working perfectly with some quick CSS tweaking, but my question i’m stumped on.. it makes my Primary Links work beautifully but then when logged in as Admin my navigation links in my left blocks go all messed up and wreck the page.

How can I make this ONLY implement for the Primary Links and ignore all other menus?

Cheers.. thanks for putting this out there, been messing with it for a few weeks now and I finally feel like i’m nearly there!

JUL20 2008 09:57:00
Comment by SuckFish

Hey, nice work!

I’m having a little difficulty implementing it with the Zen theme though. I notice in the js code you refer to #dfn css styles which are not (no longer) in your css file.

Did you take those out when you were editing?

Also i saved my js and css files into my subtheme folder and just added the following code to the top of the template.php:
drupal_add_js(path_to_theme().’/myMenus.js’, ‘theme’);

and this to the .info file:
stylesheets[all][] = myMenus.css

I believe this is better for using with a subtheme? I’m new to Drupal =P

Have you tried decoding whatever Roople Themes is doing with their templates? Maybe i should just get one of their themes and edit it.

I can’t believe that there isn’t a suckerfish drupal module…

Thanks

JUL22 2008 20:07:00
Comment by SuckFish

Bah, my bad, i see it where you put it in the page.tpl.php coding.

Could you maybe clarify where exactly that should go?

This is what i’ve got:

I must have not entered it correctly.

Thanks again!

JUL22 2008 20:12:00
Comment by Nico

Hi diggifuzz,

Thx for sharing your code,
I have seen that the roople themes use a version of suckerfish:
http://demo.roopletheme.com/

AUG04 2008 09:04:00
Comment by SuckFish

Ya i ended up modding a the litejazz roople theme to get my suckerfish menus to work.

AUG06 2008 10:36:00
Comment by digifuzz

Sorry I haven’t answered any of your questions as of late. Family has been demanding my time tons, which is not a bad thing, as far as I’m concerned. ;)

@sen: Wrap your primary_links in a div with a unique class, and change your suckerfish related css to apply to only elements within that div.

@Suckfish & Nico: I have actually looked at the roople themes in the past (specifically the tapestry theme), and while it had the desired end-results, it required more region and block creating and I decided I wanted to try to use suckerfish without having to do all that. Call it a personal challenge, etc. It’s always fun to see how many different paths one can take to reach the same happy ending. :)

AUG08 2008 16:54:00
Comment by Gavin Doolan

I have been using a module called nice_menu’s in Drupal, but for some reason I can’t get the drop downs working in IE6. FF / Safari / Opera are no problem.

Seems like the JS isn’t working.

I’m wondering though, why can’t drupal just output menu’s as nested ul, li’s?

It seems you need major work-arounds just to get this to work.

AUG26 2008 04:40:00
Comment by digifuzz

Yeah, I don’t know. The simplest way I could get Drupal to output the lists as nested ul/li’s is as shown above in the page.tpl.php section. If there is a simpler way, I’d love to hear about it. :)

~ digifuzz

AUG26 2008 17:09:00
Comment by titus

Great work, exactly what I was looking for – just a quick question though. How would I output the nested unordered list for a menu other than the primary links? I’ve tried changing the reference in:

<?
$my_menu = menu_tree(‘primary-links’);
…etc

to

<?
$my_menu = menu_tree(‘new-menu’);
…etc

where ‘new-menu’ is the machine-readable name of my custom menu, but nothing prints out. What am I missing?

(I can’t use primary links because the site I’m working on is a “virtual site” within a larger drupal installation. Using ‘primary-links’ works fine (ie. prints out the menu nicely) but doesn’t link to the menu I want!)

Keep up the good work!

OCT31 2008 06:10:00
Comment by j2g2

Hi,

I am using the salamander theme and trying to follow your steps to setup the suckerfish menu, and I got stuck in where I need to replace the $primary_links with the div you have listed above. Here is my content of the page.tpl.php. Would you please before specific on how I replacing the code. Thank you so much for your help.

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”language ?>”

xml:lang=”language ?>”>

<meta name=”language” content=”language ?>” />

$(document).ready(function(){
$(document).pngFix();
});

<a href=””

title=””>
<img src=””

alt=”” id=”logo” />

<a href=””

title=””>


<td class=”section “>

<td class=”section “>

<td class=”section “>

0): ?>

<td class=”section “>

<td class=”section “>

<td class=”section “>

‘links’, ‘id’ => ‘navlist’)) ?>

Copyright © All right reserve



NOV17 2008 15:24:00
Comment by j2g2

Didn’t seems to have all the code copied. ;( try again.

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”language ?>”

xml:lang=”language ?>”>

<meta name=”language” content=”language ?>” />

$(document).ready(function(){
$(document).pngFix();
});

<a href=””

title=””>
<img src=””

alt=”” id=”logo” />

<a href=””

title=””>


<td class=”section “>

<td class=”section “>

<td class=”section “>

0): ?>

<td class=”section “>

<td class=”section “>

<td class=”section “>

‘links’, ‘id’ => ‘navlist’)) ?>

Copyright © All right reserve



NOV17 2008 15:26:00
Comment by j2g2

When I pasted the code in the box, I saw everything, but majority of the code disappeared right after I submitted. :_(

NOV17 2008 15:27:00
Comment by Kevin

What could I possibly be doing wrong here????

Here is the link to the site.
Any help would be greatly appreciated.

shereewhitfield.com/go

DEC05 2008 21:28:00
Comment by Kevin

Anyone have trouble with IE6?
The main menu shows, but no submenus.

DEC06 2008 08:44:00
Comment by digifuzz

@Kevin:

You need to comment out the comments you added in your javascript functions. For some reason, most modern browers i checked it in simply assumed it was a comment and proceeded as usual.. ie6 dies there.

this is the part that you need to properly comment out:

call the superfish function passing the tagged UL to apply superfish too

DEC09 2008 12:02:00
Comment by Becky

Thank you thank thank you! I was getting so frustrated trying to find a simple solution.

JAN14 2009 08:34:00
Comment by digifuzz

@Becky: Glad you found it useful!

JAN15 2009 08:22:00
Comment by Becky

Me again! How would I go about setting a different ID for each ? I know its this line but I’m not sure what to put (see ???):-/

$my_menu = str_replace(“menu”, “???”, $my_menu );

JAN16 2009 13:56:00
Comment by digifuzz

@Becky,

I’m not sure, I haven’t been working with any Drupal sites @ work lately, so I haven’t had a chance to play around and figure it out! But, if you happen to figure it out on your own, I’d be interested in what you did!

JAN29 2009 12:05:00
Comment by shampton

in case anyone else is banging their head against the keyboard getting this to work, there are some missing commas in the css. for instance:

/* TOP LEVEL MENUS ITEMS ON HOVER */
.menu ul li:hover a, .menu ul li.sfHover a .menu ul li a:hover {

should be

/* TOP LEVEL MENUS ITEMS ON HOVER */
.menu ul li:hover a, .menu ul li.sfHover a, .menu ul li a:hover {

nothing inside the menu has the class menu, only the container…

FEB09 2009 13:24:00
Comment by Okinawa Guy

I have been hunting around for this solution for days for the new site I am building thanks alot. I think you just saved me many hours of stress. I was bout ready to burn a picture of a small woodland creature over my computer

FEB12 2009 17:07:00
Comment by digifuzz

@shampton,

OMG hey, I have no idea how I over-looked those commas! Thanks for spotting that, the css has been updated.

FEB17 2009 11:12:00
Comment by digifuzz

@Okinawa Guy,

I’m glad no pictures of small woodland creatures had to be sacrificed over your computer because of me. :)

FEB17 2009 11:17:00
Comment by MTecknology

Hurray! This works exactly perfect. Not only does it work perfect, but it works 100% as a drop in replacement once the css file you added is taken out. I like the opacity and I might include it in my own css file, but I think I like exactly how it is without any additional things attached.

This guide was not just very simple and to the point, it got me exactly to the goal I was after.

Consider yourself bookmarked.

MAR01 2009 11:23:00
Comment by digifuzz

@MTecknology: Awesome, thanks :)

MAR04 2009 14:00:00
Comment by Eddy

Awesome dude! Many thanks! U saved me a lot of trial and error

MAR09 2009 10:41:00
Comment by digifuzz

@Eddy: Sure thing. Nice blog, btw.

MAR12 2009 07:56:00
Comment by kent

Thank you so much for this! I’ve been trying to figure this out for two days now. Finally! Blessings to you.

MAR13 2009 02:00:00
Comment by opg

Thanks so much! This script is awesome! Still working out the IE6 and IE7 kinks, though :)

JUL27 2009 11:18:00
Comment by Chris

Hey,

I followed all the directions but, am still having some problems.

First, the menu doesn’t expand on mouse over.

Second, when I click on the menu item, and it does expand, the entire menu moves up on my page.

Third, the “child” item gets a created link in the upper right hand corner of the page when the items expand.

Any ideas?

JUL27 2009 14:43:00
Comment by Don

Works great on my test site except I have the same problem as #5 above. I don’t understand your answer in #10 :(

@sen: Wrap your primary_links in a div with a unique class, and change your suckerfish related css to apply to only elements within that div.

I think I did the top one but which css sheet do i change to my new div? The one you had us create or the style sheet for the theme?

Lost as usual,
- Don

AUG05 2009 13:36:00
Comment by Don

Ignore above (36)… I took a few wild guesses and figured out how to do it… (rather lucky really, just compared the theme’s existing css sheet)

This really is a great way to do pulldowns. Thank you for posting it!

AUG05 2009 13:54:00
Comment by Don

Not sure if you reply often but I thought I’d ask (yet another) question that has been perplexing me. How would you do more than one level of drop down menus?

Cheers
- D

AUG06 2009 12:40:00
Comment by Don

This is the greatest site in the world. I beat my head into a wall trying to figure out something, give up and ask for help here… only to figure it out myself ten minutes later.

:)

Twice now!

AUG06 2009 13:06:00
Comment by digifuzz

@Don: Hey, sorry, it’s been a while since I’ve come around – life does that sometime, right? Glad you figured it out!!

AUG25 2009 12:31:00
Comment by debra romero

Commenting commonly is not my thing, but ive surfed an hour on the blog, so thanks for the info .

NOV04 2009 23:37:00
Comment by digifuzz

@debra: Why awful info? :)

NOV19 2009 11:56:00
Comment by kunal

how do i make a: active link in the sukerfish menu
please help me out its urgent

DEC29 2009 00:10:00
Comment by matt

thanks, this helped a lot! This saved me time instead of having to switch to a ROople theme. A lot of the menu css seems like extra but it’s not hard to tailor.

JAN04 2010 09:28:00
Comment by Asim

Hi i am new to drupal… I have done every step which are mentioned in this page but when i visit the page, a javascript error occurs

$ is not defined
$.fn.hoverClass = function(c) {\r\n confiztestjs.js (line 1)
confiztestjs.js (line 1)

JAN08 2010 00:47:00
Comment by digifuzz

Asim: looks like maybe you aren’t properly loading jQuery?

MAR06 2010 08:53:00
Comment by handoyo

Hi,thanks for the tutroial.. I want to ask,is it possible to create dropline menu style in Drupal 6.x? Thanks.. Sorry if my question is beyond this topic…

MAR20 2010 17:23:00
Comment by digifuzz

@handoyo:

A quick google search led me to this:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/

Using a combination of the php I’ve written here, and the jQuery/Javascript & CSS they’ve posted on the aforementioned link, you should be able to accomplish what you are after.

Good luck!

~ d

MAR24 2010 12:09:00
Comment by Crazydog

Can you please post the theme you applied this to?

JUN18 2010 11:51:00
Comment by moudrys

Hi,
I have problems with selected primary links. Are active (selected) items supported in this solutions? Thanks for answer…

AUG11 2010 04:43:00
Comment by Convert Shoe Size

good information, I’ll read though it again

AUG11 2011 23:06:00

Trackbacks

  1. Dead Simple Suckerfish Dropdowns For Drupal w/ SuperFish - No unecessary extra markup, 100% Degradable | alankinney.com
  2. Dropdown Menu in Drupal | ToonZtudio™ :: Deep in my small world - As a freelancer life.

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

By submitting a comment you grant digifuzz.net a perpetual license to reproduce your words and name/web site in attribution. Inappropriate and irrelevant comments will be removed at an admin’s discretion. Your email is used for verification purposes only, it will never be shared.