« »

Suckerfish Style Menus in Drupal 6.x

drupal-logo.png
I 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

  1.  
  2. /* Emulates Suckerfish-style functionality with JQuery */
  3. /* Adds animation effect for drop-down and fadeups */
  4.  
  5. $(document).ready(function(){
  6.     $("#dfnmenu li").hover(
  7.         function(){ $("ul", this).fadeIn("fast");  },
  8.         function(){ $("ul", this).fadeOut("fast"); }
  9.     );
  10.     if (document.all) {
  11.         $("#dfnmenu li").hoverClass ("sfHover");
  12.     }
  13. });
  14.  
  15. $.fn.hoverClass = function(c) {
  16.     return this.each(function(){
  17.         $(this).hover(
  18.             function() { $(this).addClass(c);  },
  19.             function() { $(this).removeClass(c); }
  20.         );
  21.     });
  22. };    
  23.  

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

  1.  
  2.  
  3. /* Navigation */
  4. .menu ul, .menu ul li ul {
  5.         list-style: none;
  6.         margin: 0;
  7.         padding: 0;
  8. }
  9.  
  10. .menu {
  11.         z-index: 10;
  12.         position: relative;
  13.         text-align: left;
  14.         width: 800px;
  15.         height: 33px;
  16. }
  17.  
  18. /* TOP LEVEL MENU ITEM */
  19. .menu ul li {
  20.         float: left;
  21.         margin: 0;
  22.         padding: 0;
  23.         position: relative;
  24. }
  25.  
  26. /* TOP LEVEL MENU ITEM */
  27. .menu ul li a,
  28. .menu ul li a:link,
  29. .menu ul li a:active,
  30. .menu ul li a:visited {
  31.         font: 1.1em/27px Verdana;
  32.         color: #555555;
  33.         display: block;
  34.         padding: 1px 34px 0px 34px;
  35.         margin-top: 1px;
  36.         text-decoration: none;
  37.         border-left: 1px solid #ddd;
  38.         outline: none;
  39. }
  40.  
  41. /* Make sure the first item in the list doesnt have a left border */
  42. .menu ul li.first a {
  43.         border-left: 0px;
  44.         outline: none;
  45. }
  46.  
  47. /* TOP LEVEL MENUS ITEMS ON HOVER */
  48. .menu ul li:hover a,
  49. .menu ul li.sfHover a,
  50. .menu ul li a:hover {
  51.         background-color: red;
  52.         background-position: -15px -33px;
  53.         height: 30px;
  54.         outline: none;
  55. }
  56.  
  57. /* SECOND LEVEL MENU ITEM */
  58. .menu ul li:hover ul li a,
  59. .menu ul li:hover ul li a:visited,
  60. .menu ul li.sfHover ul li a,
  61. .menu ul li.sfHover ul li a:visited {
  62.         font-weight: normal;
  63.         color: #666666;
  64.         background:#e8f0f3;
  65.         margin: 0px;
  66.         border: 0px;
  67.         outline: none;
  68.         height: 23px;
  69.         padding: 0px 34px 3px 34px;
  70. }
  71.  
  72. /* SECOND LEVEL MENU ITEM HOVER */
  73. .menu ul li:hover ul li a:hover,
  74. .menu ul li:hover ul li.first a:hover,
  75. .menu ul li:hover ul li.last a:hover,
  76. .menu ul li.sfHover ul li a:hover,
  77. .menu ul li.sfHover ul li.first a:hover,
  78. .menu ul li.sfHover ul li.last a:hover {
  79.         height: 23px;
  80.         background: #FFFFFF;
  81.         padding: 0px 34px 3px 34px;
  82.         color: #000;
  83.         width: auto;
  84. }
  85.  
  86. /* SECOND LEVEL MENU ITEM */
  87. .menu ul li ul {
  88.         width: 200px; /* expand as needed for longer submenu names */
  89.         color: #000000;
  90.         list-style: none;
  91.         margin: 0px;
  92.         padding: 0px;
  93.         position: absolute;
  94.         top: -999em;
  95.         left: 0px;
  96.         border: 1px solid #dddddd; /* border around dropdown menu */
  97.         opacity: 0.9;
  98.         -moz-opacity: 0.9;
  99. }
  100.  
  101. .menu ul li:hover ul, .menu ul li.sfHover ul { top: 30px; }
  102.  
  103. .menu ul li ul li {
  104.         border: 0px;
  105.         float: none;
  106.         padding: 0px;
  107.         margin: 0px;
  108.         color: #000000;
  109. }
  110.  
  111. .menu ul li ul li a {
  112.         border: 0px;
  113.         white-space: nowrap;
  114.         float: none;
  115.         padding: 1px 34px 1px 15px;
  116.         margin: 0px;
  117.         display: block;
  118.         height: 29px;
  119.         color: #000000;
  120. }
  121.  
  122. .menu ul li ul li a:visited { color: #000000; }
  123.  
  124. .menu ul li ul li a:hover {
  125.         background: #CEFFCE;
  126.         color: #000;
  127.         border: 0px;
  128.         margin: 0px;
  129. }
  130.  

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

  1.  
  2. <!– DFN Menu Library + CSS for drop-down –>
  3. <script src="/sites/all/libs/dfn/dfn_menus.js"
  4.           language="javascript" type="text/javascript"></script>
  5. <link rel="stylesheet" type="text/css"
  6.        media="screen" href="/sites/all/libs/dfn/dfn_menus.css" />
  7.  

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

  1.  
  2. <div id="dfnmenu" class="menu">
  3.   <?
  4.   $my_menu = menu_tree(‘primary-links’);
  5.   $my_menu = str_replace("leaf", "", $my_menu );
  6.   $my_menu = str_replace("active-trail", "", $my_menu );
  7.   $my_menu = str_replace("menu", "", $my_menu );
  8.   $my_menu = str_replace("active", "", $my_menu );       
  9.   $my_menu = str_replace("expanded", "", $my_menu );     
  10.   $my_menu = str_replace(" class=\"\"", "", $my_menu );                  
  11.   print $my_menu;
  12.   ?>
  13.   <div style="clear: both;"></div>
  14. </div>
  15.  

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/Bookmark

Posted on Friday, June 13th, 2008 at 10:11 am and is filed under Drupal, Javascript, Php. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

47 Responses to “Suckerfish Style Menus in Drupal 6.x”

  1. 1

    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?

  2. 2

    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.

  3. 3

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

  4. 4

    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

  5. 5

    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!

  6. 6

    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

  7. 7

    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!

  8. 8

    Hi diggifuzz,

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

  9. 9

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

  10. 10

    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. :)

  11. 11

    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.

  12. 12

    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

  13. 13

    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!

  14. 14

    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



  15. 15

    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



  16. 16

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

  17. 17

    [...] author of the other technique who’s article I am too lazy to find at the moment (oh alright, heres his technique but mines still smooth as silk y0) and whos code for modifying the menu output was used as a basis [...]

  18. 18

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

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

    shereewhitfield.com/go

  19. 19

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

  20. 20

    @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

  21. 21

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

  22. 22

    @Becky: Glad you found it useful!

  23. 23

    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 );

  24. 24

    @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!

  25. 25

    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…

  26. 26

    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

  27. 27

    @shampton,

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

  28. 28

    @Okinawa Guy,

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

  29. 29

    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.

  30. 30

    @MTecknology: Awesome, thanks :)

  31. 31

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

  32. 32

    @Eddy: Sure thing. Nice blog, btw.

  33. 33

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

  34. 34

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

  35. 35

    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?

  36. 36

    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

  37. 37

    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!

  38. 38

    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

  39. 39

    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!

  40. 40

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

  41. 41

    [...] Suckerfish Style Menus in Drupal 6.x Credit: digifuzz [...]

  42. 42

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

  43. 43

    @debra: Why awful info? :)

  44. 44

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

  45. 45

    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.

  46. 46

    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)

  47. 47

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

Leave a Reply