Home > WordPress Menubar > Dropdown menus for WordPress

Dropdown menus for WordPress

December 9th, 2007 Leave a comment Go to comments

[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:

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!

Categories: WordPress Menubar
  1. January 17th, 2008 at 21:18 | #354

    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 !

  2. January 17th, 2008 at 23:08 | #347

    Hello JP,
    thank you for reporting this weird problem, I’m trying to reproduce it!
    Happy 2008!

  3. February 2nd, 2008 at 20:39 | #348

    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

  4. February 2nd, 2008 at 20:42 | #349

    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

  5. February 2nd, 2008 at 22:18 | #350

    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!

  6. February 18th, 2008 at 15:00 | #351

    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

  7. February 18th, 2008 at 23:46 | #352

    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!

  8. February 20th, 2008 at 14:46 | #353

    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

  9. May 28th, 2008 at 12:07 | #356

    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!

  10. May 28th, 2008 at 20:52 | #355

    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!

  11. September 2nd, 2008 at 17:40 | #357

    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?

  12. September 2nd, 2008 at 19:22 | #358

    Hi Nomad-one,
    that feature is available in version 3.0 beta, using the Heading type for your non-clickable menu items.

  13. horst
    October 22nd, 2008 at 12:27 | #359

    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

  14. October 22nd, 2008 at 20:12 | #360

    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.

  15. Kash
    February 1st, 2009 at 15:28 | #361

    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

  16. February 1st, 2009 at 18:33 | #362

    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!

  17. Kash
    February 1st, 2009 at 20:57 | #363

    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

  18. February 1st, 2009 at 23:19 | #364

    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.

  19. February 18th, 2010 at 12:25 | #899

    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

  20. February 18th, 2010 at 15:18 | #902

    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!

  21. February 18th, 2010 at 17:26 | #905

    Hi Andrea, yup that extra line did the trick perfectly! Thanks very much for a great plugin and your speedy response

    Matt

  22. July 25th, 2010 at 22:43 | #1257

    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?

  23. July 25th, 2010 at 23:16 | #1258

    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.

  24. July 25th, 2010 at 23:18 | #1259

    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?

  25. Rick
    July 26th, 2010 at 08:15 | #1260

    That fixed it. Thanks.

  1. No trackbacks yet.

Spam Protection by WP-SpamFree