Suckerfish CSS Drop Down Menus in Drupal Made Simple

Hello. Any ideas you can provide as how as to how we can make this work on iphones/ipads since they don't support the hover functionality? The menu would have to show up upon click, instead of on hover on iphones/ipads. Your time and help are much appreciated. Thank you.

You have saved my sanity. By posting this gem, you have earned big Karma points in the universe. This is exactly what I was looking for -- the least code to do these kinds of menus in the context of Drupal.

I am eternally grateful!!

Peggy

Thanx for tutorial, but it works only when current item is selected:
For example i have Primary links with items "About Us" "Our Creatures" and "Help"
The item "our creatures" have other 3 subitems. They appear only when "Our creatures" is still selected and i hover mouse on it. When i'm at "Help" for example, the hovering on "Our creatures" doesn't give results. How can i modify js to correct it?

V.F.

Thank you very much for this very useful and well done tutorial.
I have just some question: I'd like to change the color of a link when the mouse is on it. do somebody know the trick?
Otherwise in addition to the code above I added "#block-menu-primary-links li :hover;" in my pages.css to display the sublinks of the menu.

Mathilde

Thank you for posting this, I am using it on a new Drupal site I am working on... There is one small issue, when I test in IE 6 the drop-down appears, but as I move the mouse down into the first drop-down link, they re-arrange themselves horizontally. As you move the mouse down through the drop-down menu, the links sometimes arrange themselves back as intended.

Have you ever run into this?

Where do I add the jQuery function? I'm new to Drupal.

Thanks,
Melanie

I tried on my new theme and it works fine. Don't forget to add to page.tpl.php or the menu will not show on mouseover.

But there is a problem. maybe just a little pity. I have a background color defined in css of a:hover on, let's say "menu-01", according to the demo image above. But when the pointer moves on the shown menu, let's say move on the "menu-01-01", the background color of "menu-01" changes back to a:link.

I think it's better to have the background color of "menu-01" the same as "menu-01-01" when the pointer is on it. How can the "menu-01" background color maintain a:hover definition when the pointer moves on the shown dropdown menu instead of changing back to a:link style?

thank you so much.
best regards.

I've been messing with nice menus for two days, not getting anything out of it. Then I find this and everything works flawlessly in 5 min!

1 million thanks!

Hi there, thanks for this tutorial - i have most of it, when i mouseiover the top level item it displays the flyouts, but when i mouseoveer the flyout, it dissapears.
I am not an expert coder, so please can you assist me to get it working.

thanks.

Your generous contribution has helped me immensely and it also works fine with all major IE versions.

Thank you.
Hayesha

I've noticed that the functionality stops working if I add the primary menu to my page.tpl.php ... does this HAVE to be in a block?

I'd like to be able to add it as the default menu within my page.tpl.php

What say you?

I've got the menu implemented... not a problem at all. Great tutorial...but I cannot, for the life of me, stylize this menu one bit! Sure, I can tell various aspects of the menu items to be a different color, etc... but I'm trying to get a background image that spans the width of the site, and then load rollover images on top. My theme hates me. I'm using my own sub-theme of Genesis and I cannot understand what the deal is.

hi! I just put in the code into drupal 6.x and its working very nicely in everything except IE6. I have a horizontal menu bar with drop downs, but in IE6, it gets split in half into 2 rows? I've messed around with it, and now it's each menu item on a row. I'm not sure what's going on though..

Thank you for the simplest, fastest menu ever!

Hey Eric - Great tutorial. Thank you. I had been searching for a solution for this for a couple days now. I'm having one issue, it works great on my homepage - but doesn't work at all on any inner pages.

The jQuery is included on all the pages and the markup seems identical, but the java isn't enabling the display:block; on my li tag. The site is http://dev.ifxonline.com/. Any help would be much appreciated.

Best,

Michael.

Hi Eric

Thanks for the info and I've one question about suckerfish

How to put suckerfish in secondary link?
Any tutorials for that.

Thanks..

I thank you for the tutorial, I enjoyed following it and working along.
Unfortunately I am only getting the top level menu. I have viewed the
source with Firefox and verified that the javascript file and the menus
are the full menu is in the code. The javascript is being loaded in the
code but only the top menu is being inserted into the code. Even though
I have set it to enabled and expanded. I have even deleted the whole
directory where drupal is and started over fresh, installed a few modules
(they are installed but not configured yet only thing that is configured
is the site information, which is development, this is also a brand new
theme that is being created from scratch that is only about 15 lines or so)
I am trying to do this for primary-links I think I have done everything
right but mine is not working. I added a Home menu and the rest are the
default drupal menus (Home, My Account, Create Content, Logout) with the
menus I have the only one that should have child menus is Create Content
which would have a Page and Story menu, I even tried adding the Administer
menu and expanding some of the child menus but it does the same thing.
No idea if it a module I have installed conflicting or not even though
they are not configured but the list of modules I currently have installed
are auto_nodetitle, captcha, devel, fivestar, logintoboggan, pathauto,
remember_me, token, views, votingapi. Any help you could shed on this
matter would be greatly appreciated.

hi
thanks for this code .

i use this code in site : www.alphaomegachemicals.com you can see it.

umesh
www.raipurlive.com

Hi there,

I've got your drop downs to work, however they are only appearing when I'm logged in as the administrator. I've checked the source code and the links are all in the source code, it seems the javascript part does not display them for other users.

I put the javascript at the head of the page.tpl.php page.

Any help much appreciated.

Ben

Hi, thanks for the great tutorial. I am trying to follow, but I can't get my menu to print anything other than the first level of primary links. I have all of the menu items listed and checked as enabled and expanded. My theme uses print theme('links', $primary_links, array('id' => 'member-topnav')); to print the menu.

Do I need to add another paramter to tell it to show the second level or something? Any ideas?

Thanks for your help,
Nancy

Hi,
I've been scowering the web to find out how to achieve something that i thought would be simple and obvious and your little tutorial has got me the closest yet to the solution - thanks! I just need one further push. I'm not a coder, i can usually spot and edit simple stuff in style sheets etc and my copy-and-paste skills are tremendous so please keep that in mind :)

I got the tutorial to work - got the primary menu to work in a region block. However, i want it to work in the default primary links position - where it's already themed. I think you mentioned it in a reply about using ID's and passing a third argument, but i have no idea what that means?
Here's my site, it's very basic as i'm slowly learning the bits of Drupal i need to create what is essentially a good, clean, usable community site:
http://northbroads.villagelifeonline.co.uk/
I've put your tutorial menu at the bottom of the content for now and you can see it works. What i want is to have the drop down functionality on the menu at the top. If you could help with that - point me to the file to edit and what to paste in there - that would be fabulous! Assuming that's possible :)

Thanks
Robin

What a great write-up of how to make this happen. I was searching and searching on how to add this functionality easily to the theme I was using. Your explanation makes sense and is simple to implement. Great job.
I also looked as Nice Menus module, but I didn't feel I should need a module to do what you could do with css and javascript. This will make it possible to add suckerfish functionality to any theme I want to use. Awesome.
Question for you, where do you recommend putting the javascript that you are adding in? The script.js file in your theme?

Nice and simple! You can also give Nice menus module a go too. ;-) I know it doesn't suit everyone and is heavier than your tut, but it covers most bases pretty well. In version 2 for Drupal 6 there will also be configurable JS using Superfish (the jQuery fancy enhancements to Suckerfish).