By WorldFallz on

anyone have any luck integrating suckerfish into the zen theme? i love the cleanliness and customizability of this theme-- the only thing it's missing is suckerfish dropdowns. Just curious if anyone has done this already. any info would be great... thanks.

⋅ Categories: Drupal 5.x

Comments

mwpeters’s picture

mwpeters commented

I inherited a project that requires this and a bunch of other challenging modifications. I have a crude implementation of all the modifications working now, but it's not pretty and nothing I'd want to hand anybody else as a guide. I'm still learning and everything still needs a second or third code cleanup before production use.

But it is pretty clear to me that it is all possible without abandoning the heart of the Zen theme.

One key is to create a seperate "div" within the body for the dropdown menu's. I'm currently using a hacked version of the SimpleMenu module to associate and locate that menu in a "div" created between the standard header and the main content container. SimpleMenu uses jQuery based Superfish. This menu is currently entirely inaccessible without JavaScript though.

I probably should create a proper Drupal region and code a Son of Suckerfish menu or at least a more accessible implementation of Superfish working.

You can control CSS positioning on this type of thing in most browsers by embedding multiple levels of "div"s and "absolute" CSS positioning, but if you need to support all versions of Opera and IE 5 you're in for a real challenge.

My problem is I still don't even fully understand how all aspects of these menus or their CSS code is working. I also need to understand how SimpleMenu is able to access the Suckerfish code that works around the IE issues.

I'm balancing a bunch of other challenges, so progress is slow. I've also had to create separate top and bottom outer envelopes for the page and footer contents to support a wraparound graphic and center float everything within them. In addition to the menu "div", I've also had to create another one for some embedded flash animation.

WorldFallz’s picture

WorldFallz commented

I probably should create a proper Drupal region and code a Son of Suckerfish menu or ...

That's all I'm looking to do. I've added son of suckerfish to standard static html sites, but I'm still fairly new to drupal so I'm not sure where to put what to blend it into the zen theme. As for support, whatever Son of Suckfish supports is all I'm looking for. I usually stick a footer with a "best viewed with" section with download links.

I'm planning to use zen for my standard site skeleton so I'm trying to fold all the common theming type adjustments I make directly into the theme. If I make any progress I'll post back... hopefully with the modified theme when I'm successful.

gav240z’s picture

gav240z commented

I've not found an easy way to implement this I'm afraid.

I have a Zen Sub Theme on Drupal 5.x and I decided to go with the Nice Menu module. Problem is the drop downs don't wory in IE6, probably a Javascript issue, but I'm finding it hard to diagnose.

I'm not sure why its so difficult to implement such a common theme function to be honest.

WorldFallz’s picture

WorldFallz commented

I'm not sure why its so difficult to implement such a common theme function to be honest.

you mention it in your post-- browser incompatibility. There's no reason this should require js at all-- it's simple css really. Browser incompatibility is pure evil.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

gav240z’s picture

gav240z commented

I was referring to Drop Down menus and Drupal.

I'm not a php programmer myself, but it seems difficult to get Drupal to output a nested list item eg: Ul, LI, UL, LI etc.. this would make turning a primary nav into drop downs relatively easy, however so far I've found I have to use an external module for this. I may be wrong as I'm still new to Drupal but that's the impression I get so far.

I've been searching for ages for a solution to the problem and digging up old posts, but it seems nobody has documented a good way to go about it yet.

If I find that solution I will do my best to document it myself.

Cheers,
Gavin.

WorldFallz’s picture

WorldFallz commented

did you look at http://drupal.org/project/menutree?

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

gav240z’s picture

gav240z commented

Menu Tree doesn't appear to work the way I thought it would. Rather it outputs the entire list on a page and not as a block I could easily style.

toddtomlinson’s picture

toddtomlinson commented

The easiest method for getting suckerfish menus in Zen is to use the nice menus module (http://drupal.org/project/nice_menus). It provides the options for having horizontal or vertical menus with drop down menus or left/right flyout menus. For example site that we built using nice menus check out westlinnoregon.gov. Customizing the look of the menus is pretty simple -- there is a small CSS file that ships with the module. If you need help themeing the menus let us know.

-------------
Todd Tomlinson
Managing Partner
Aha Consulting
www.ahaconsulting.com

-------------
Todd Tomlinson
Author and Drupalista

gav240z’s picture

gav240z commented

Hi Todd,
Thanks for the response I am using the Nice Menu's module on my site http://www.vintagejdm.com/ but its not working in IE6. I have a feeling its because the Javascript is not outputting for IE6, but I am having trouble diagnosing the issue.

I have a couple of ideas to try, but any help with getting it to work in IE6 would be muchly appreciated.

Cheers,
Gavin.

WorldFallz’s picture

WorldFallz commented

you dont mention which version of nice_menus you have, but there were a couple of issues for ie6 in the module's issue queue and it seems the latest dev is supposed to fix that.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

gav240z’s picture

gav240z commented

Thanks for looking that up. I'm still new to Drupal the issue que and all the help sections.

I'm using 5.x-1.2 which is an official release. http://drupal.org/project/nice_menus

Looking at the project page there, the dev versions look like they aren't supposed to be used?

I will give the dev version a shot on my local machine tonight and see if it plays nice.

WorldFallz’s picture

WorldFallz commented

the quality of dev versions vary greatly-- in general i always go with the official supported release. But there are many cases where I've changed to devs that fix a specific problem and it was fine. Usually the maintainer will make it pretty clear whether or not to use a dev to fix or problem or not to use a dev because it's being heavily worked on (just check the isssues queue). Also, if you take dev versions for a test drive on a test system before going live with it you should be fine.

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime." -- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz

gav240z’s picture

gav240z commented

Thanks for the help, I did just that. I tested it on my localhost copy of my site and it seemed to function exactly the same with no issues, so I put it live. The drop downs now work in IE6 but they don't work quite right. Instead of appearing vertically below each other they appear to the right hand side of each other, yet on the second roll over they look ok.

I will check and see the issue que for this and if I can't find anything I'll post a new issue. So I've got somewhere albeit a little slowly.

Thanks

toddtomlinson’s picture

toddtomlinson commented

Hi Gavin,

Outstanding site! What a great topic -- I've book marked it and will share with friends who are also into vintage cars. There is a relatively easy fix for the problem with IE6. I pulled your site up in IE6 (on my Mac) and noticed that the drop down menus appear -- but when you hover over the menu and attempt to traverse down the list of items -- they disappear. There is a great description of why this happens and how to fix it at the following site:

http://www.xs4all.nl/~peterned/csshover.html

The basic fix is to dowload the .htc file that addresses the IE6 specific problems with hover -- which appears to be the issue that you are having.

Todd Tomlinson
Managing Partner
Aha Consulting

-------------
Todd Tomlinson
Author and Drupalista

gav240z’s picture

gav240z commented

Hi Todd,
Thanks for that I'll definately read through that and see if I can fix it with the article you linked to. I'm glad you like the site, I love my Vintage Cars too, and Drupal is the perfect platform in terms of functionality. Its taken a while to learn, but really worthwhile and glad I did.

I managed to get drop down's working as you said, but it seems they are appearing next to each other, as oppose to vertically beneath each other.

I had to use the Dev version of Nice Menu's, the JS in that seems to have worked.

Will let you know how I go.

Cheers,
Gavin.

toddtomlinson’s picture

toddtomlinson commented

Hi Gavin,

I just gave YUI menus a try with fantastic results. Very easy - great effects -- and so far cross browser perfect. I downloaded the YUI module and the YUI menu module - set the base menu - updated my page.tpl.php with the following:

 if (module_hook('yuimenu','menu') && ("tns" == variable_get('yuimenu_type','tns') || "lns" == variable_get('yuimenu_type','lns') || "tnm"==variable_get('yuimenu_type','tns')))
  {

print html_menu(variable_get('yuimenu_root','1') );
}

it worked perfectly -- none of the headaches that I had with suckerfish!

Todd Tomlinson
Managing Partner
Aha Consulting

-------------
Todd Tomlinson
Author and Drupalista

gav240z’s picture

gav240z commented

Thanks for that, I'm still looking for a good CSS Drop down menu system. I will try your suggestion and see how I get on.

Renzy’s picture

Renzy commented

Answered my own question, for any one who is wondering, there is a documentation page on how to get this working with the primary links here:

http://drupal.org/node/215142