Dropdown menus for WordPress
![[Suckerfish menu template]](/images/menuSuckerfish.jpg "Suckerfish menu template")
If you are using WordPress Menubar you can easily build dropdown menus, using the Suckerfish menu template.
The Suckerfish template (Download) is named after the two popular articles teaching how to build lightweight, accessible, standards compliant, cross browser compatible dropdown menus:
- Suckerfish Dropdowns (Patrick Griffiths, Dan Webb)
- Son of Suckerfish Dropdowns (Patrick Griffiths, Dan Webb)
The Suckerfish template uses a single image for the shadow under the horizontal bar, and a few lines of JavaScript code enable it to work with IE. If JavaScript is disabled, the dropdown effect doesn’t work in IE, but keeps working in the other tested browsers (Firefox and Opera).
As usual it’s possible to customize the menu presentation editing the template style sheet, changing size, colors, fonts, borders, margins so that your menu blends perfectly with your site’s design.
Happy customization!
Hello,
This plugin is awesome ! Thanks a lot, it is very easy to use and it works fine as far as I know except sometimes under IE when I click on one item of the menu and leave the mouse on the menu after that, the content of the page disappear. I hope I am clear enough
.
Has anyone met this behaviour ?
Best wishes for 2008 !
Hello JP,
thank you for reporting this weird problem, I’m trying to reproduce it!
Happy 2008!
Hello Andrea,
I reproduce it on your web site with IE6.0 (works fine with Firefox) :
- load page http://www.dontdream.it/en/wordpress-menubar-plugin/
- look at the cursor on the vertical scroll bar, watch carefully,
- just move your mouse over the menu, the page is now cut after “Features / With the WordPress Menubar Plugin:” and the footer is just below.
I tried to correct some errors that appeared with w3c and css validators, it didn’t change anything.
Hope it helps !
JP
Hi again,
It just come to me that it is maybe (almost certainly) linked to the length of the content in the sidebar.
Let me know if you find something or need help (as far as I can help
).
JP
Hello JP,
you have discovered a really strange behavior of IE6 with WP Menubar! I have no clue at the moment, I’ll try to dig deeper into it. Thanks!
Hello Andrea,
I tried to remove the height attribute in wpm.css for .clear and the bad behaviour seems to disappear, I have not investigated further. What do you think ?
JP
Hello JP,
you are right, the strange behaviour is caused by that attribute, but I can’t imagine why. By the way, I found another web page with a similar problem:
http://blog.youngpup.net/
Try hovering with your mouse alternately on the ’2008′ and ‘February’ links in the sidebar!
Hello,
seems to be the same, you’re right.
Removing the height attribute works for the type of menu you also have on your website, but for the drill down menu type, the problem remains ..
JP
Dude, I suck — no pun intended!
Anyway, I had successfully installed the menubar and got things going, except I really wanted a drop-down menu to call my list_pages and list_categories. Then I browsed your site some more to find that you did create a drop-down menu for my wants! Yay! So, what I had done was downloaded and extracted suckerfish.zip; because I had already successfully installed the menubar I just saved over the PHP and CSS files from the suckerfish folder to my default theme via FTP. But, I don’t see a new menu function to call the list_pages and list_categories. So, did all my cutting corners just mess this deal up for me? 
Boy, I hope I made some sense because it’s past 3:00 AM! haha!
Hi MsB,
you did everything right, but .. this template cannot display the whole page or category tree, it needs to start from a specific page or category (if you select a single page or category you’ll get their subtree too).
If you really wish to display the whole trees, you could try Menubar 3.0 beta. Please let me know if that works for you!
These are great menu plugins. Would you know of any way to set parent level pages to only be buttons and not to link to any page?
Hi Nomad-one,
that feature is available in version 3.0 beta, using the Heading type for your non-clickable menu items.
hi andrea,
thanks for this great plugin. it works wonderfully. my question would be: ist there any way to get just a 2 line horizontal menu? (all pagechildren shown in a second row, not in a dropdown one under the other?) do you think with some css-reconfiguration this could work with the menubar-plugin? (e.g. http://veerle.duoh.com/index.php/blog/comments/2_level_horizontal_navigation_in_css_with_images/)
thanks
horst
Hi Horst,
yes, I think that we can achieve that result simply altering the menu CSS. I’m going to release a new Menubar beta version in a few days, then I’ll try to write the CSS needed for that 2-level menu.
Hi Andrea,
Thanks for your excellent plugin and for all your help and comments. My friend Alexandra contacted you recently and you very kindly sent her a new css file which fixed an issue we had.. thanks
One question I wanted to ask: As we are newbies to WordPress and CSS, is there an easy way to make the label of the category in the suckerfish menu different to what the actual category name is. i.e. Can we shorten it to fit on the menubar but keep it elsewhere (e,g for H1 tag purposes). An example would be “Marketing Jobs in IT & Telecoms” doesnt fit on the menubar but we need it this length for our H1 tag.
Many thanks
Kash
Hi Kash,
if you are using Menubar version 2.3 the category tree is generated by a WordPress function, so there is no way to modify the category names.
With Menubar version 3.0 instead, you have also the option to build your tree one item at a time, and for each item you can choose the display name, possibly different from the category name.
So if you really need display names different from category names you need Menubar 3.0 and, if your menu is a large one, you also need a lot of patience to manually configure each item. Hope this helps!
Thanks so much Andrea.
We are using 2.3. I will upgrade to 3.0. Before I do.. just to clarify, will I be able to let 3.0 automatically generate the category tree and if there are any categories that need to be manually configured, I will be able to do this on a case by case basis?
Thanks
Kash
No, unfortunately it’s not so convenient. You’ll need to configure manually the whole subtree where the long category name is; moreover, that subtree will remain static, that is it won’t automatically reflect the actual category tree changes (categories added, categories deleted).
To sum it up, I’d recommend to switch to Menubar 3.0 because it’s more feature rich, but I’d try to use shorter names for categories if possible.
Hi, I’m using menu bar ver 4.6 suckerfish 45. In IE7 the drop down list items are sticking on the page, not disappearing when the mouse is moved away, or when you mouse over another drop down box. In IE8 it is ok. You can see what I mean here (if you have IE7): http://www.utilitiessavings.co.uk/wordpress
If anyone knows how to go about solving this problem, I would really appreciate it.
Thanks,
Matt
Hi Matt,
that’s the IE sticky bug, I’ve already updated Suckerfish_45 with a workaround. Please try downloading and using the new template version, and let me know if that helps!
Hi Andrea, yup that extra line did the trick perfectly! Thanks very much for a great plugin and your speedy response
Matt
Andrea,
I love your plugin but discovered a problem with IE. I am running NextGen Gallery plugin and on the Gallery page, the gallery images are on top of the drop down project menus.
Is there a way to fix this?
Don’t know if this any help. In Firefox, everything is OK, until I gave the gallery images a z-index of 99 and then they appear on top of the pull downs just like in IE. If I make the z-index negative, the gallery images disappear so that’s no help.
I think the solution might be contained in this post or the following comments but I am not sophisticated enough in my CSS knowledge to know what to do.
Hi Rick,
I think you inadvertently removed two lines from ssf-yellow.css:
.ssf-yellow-wrap {...
position: relative;
z-index: 49;
}
Or perhaps you were using an old template version?
That fixed it. Thanks.
Hello,
I’m having an issue with Suckerfish_41 template.
I want to delete the white line that separates each category in the menu, but I can’t find where I can remove It. Can you help me? Thank you!
Hi Dario,
Those lines are actually the borders of the menu list elements. To remove them, you can give them the same color shade as the element background.
Hi Andrea, thanks for this plugin really usefull.
I need some help, for i’m a newbie in wp and plugins (even in css…).
I’d like to create a horizontal menu with two lines. The first (upper one) is to show the relative pages (lower one) in horizontal line and not in a vertical one. it could be a category (upper one), for instance, and pages related to this category (lower line).
i’m using wp 3.3.1, theme Twenty Eleven 1.3, menubar 4.10.
Awesome style, each clickable item in menù in a different color.
Thanks in advance to anyone who can help me.
@Guido
Guido,
Sorry I don’t know the answer, I hope other readers can point you in the right direction!
@andrea
Thanks! in the meantime, time of experimentation!