WordPress Dropdown Menu Plugin

Posted on Jan 14th 2008 by Ryan.

I was reading a post about a new drop down navigation WordPress plugin on one of my favourite websites, WordPressGarage. However I prefer the standard route to creating dropdown menus of the Suckerfish method. So I learned how to create a plugin (which was a lot easier than I thought, only took a few mins to figure it out) and I have now created a fully functioning Son of Suckerfish style dropdown menu plugin for WordPress :)The plugin produces W3C valid HTML and CSS and only requires Javascript to function for very old browsers such as IE 6. The Javascript is held in an external file which is linked via IE conditional comments, so only the browsers which require it will download the file. You have some control over what items (pages, categories, archives, blogroll etc.) appear in your dropdown via the plugins options page.

The latest version now supports my new Suckerfish Dropdown Generator page. Simply copy and paste the CSS from the generator to the plugins options page.

Demo

Demo is available here … Ryan’s SuckerFish Dropdown Plugin demo

Download

The plugin is available for download here … Suckerfish WordPress Plugin Version 1.6.4

Installation

Add the following code wherever you want the dropdown to appear in your theme (usually header.php) and activate the plugin in your admin panel.

This code adds a button for your home page and dropdowns for your Pages, Archives, Categories and Blogroll.
<?php suckerfish(); ?>

Customisation

You can modify the look of your dropdown by using my new Online Suckerfish Dropdown CSS Generator. The generator has been designed with this plugin in mind, so just copy and paste the CSS code from the generator to the plugins options page.

Compatibility

The dropdown menu has been tested (and works correctly) in the following browsers:

Mozilla Firefox Version 2.0
Mozilla Firefox Version 1.5
Opera Version 9
Safari Version 3.0
Internet Explorer Version 7.0
Internet Explorer Version 6.0 (with Javascript on)
Internet Explorer Version 5.5 (with Javascript on)
Internet Explorer Version 5.0 (with Javascript on)

Live Examples

http://psychicgeek.com/
http://www.advs.net.au/
http://awakenthesleeper.com/
http://www.dutchblitz.net/
http://1morechapter.com/
http://winewarehouses.com/
http://nlcprojects.com/church/
http://chrislaing.net/
http://shoalhavenheads.net.au/
http://www.bmkphotography.com/blog/
http://www.spotonseoservices.com
http://www.medicina-muncii.com/
http://ryannewmaninfo.info/
If you are using this in a live environment then let me know and I’ll post your link here.

Other options

The Wordpress CSS Drop-down Menu and Webdezine CSS menu WordPress plugins generate a dropdown menu using Stu Nicholl’s approach of using IE conditional comments to trigger the dropdown in very old browsers such as IE6. I prefer not use this approach as it creates unnecessary clutter in your HTML and makes styling the dropdowns more difficult, but the method does have merit and may be of interest to those of you who would prefer their menu to be accessible to those not using Javascript in very old browsers. The JQuery Dropdown Plugin features highlighting of the active page and a fancy graphical slide and fade out effect for the dropdowns (see our beta plugin for an alternative to this) but I could not get their demo to work in Safari 3.0, IE6, IE5.5 or IE5. These plugins only support WordPress pages. The dTabs plugin generates a dropdown for themes which are specially prepared for it, however it does not work with Javascript off so you will need to have another menu system available for users without Javascript enabled.

Coming Soon

Animated Superfish style dropdowns, fully customisable menus and pages and/or category exclusion. To try the new features out now, please visit the Beta plugin page and/or the Beta plugin demo site.

Credits

Thanks to Patrick Griffiths and Dan Webb for their article which I used as a model for the CSS used in this plugin. And thanks to Miriam Schwab for writing the blog post which motivated me to create it.

Custom designs

If anyone out there would like a custom designed dropdown, then please get in touch with me via my Contact Page for a quote.

Posted in Web Development.

388 Responses to “WordPress Dropdown Menu Plugin”

Pages: « 39 38 37 [36] 35 34 33 32 31 30 29 … 1 » Show All

  1. Ryan on: April 8th, 2008 at 2:49 pm

    Mary - glad you like the plugin :)

    Clive - Thanks for your second message on the beta page.

  2. Mary on: April 8th, 2008 at 10:51 am

    Amazing! yes, yes! wordpress is going to be the biggest CMS. Keep the great work!!!

  3. Clive on: April 8th, 2008 at 10:43 am

    Hi there, this plugin looks really good, many thanks for making it available. I am having difficulty getting it to work with sub pages in IE. It works really well in Firefox and Safari (both on a PC) but in IE6 and IE7, it does not seem to allow the sub-menu drop-down to appear on the right, it tries to display it in the same width as the level above it. The opacity is great but I am not sure if there is a workaround for sub menus with IE?

    Thanks very much indeed

    Clive

  4. Ryan on: April 7th, 2008 at 12:31 pm

    Vincent - I usually avoid adding the pipe character as it doesn’t have any semantic value. I use border-right:1px on the individual list items to achieve that effect.

    You could add the pipe character manually if you hard coded the menu into your theme and added <li>|</li> it would probably work.

  5. Vincent on: April 7th, 2008 at 12:21 pm

    I’m using the latest suckerfish plugin for wordpress and I’m trying to add a pipe | character between the main list items. I know that I couldn’t get it working with the wp_listpage function and wonder if you came across a need to add that?

  6. Ryan on: April 7th, 2008 at 9:45 am

    Gef - I’ve seen that NAVT plugin before and plan to take a closer look to see if they’re compatible at some stage but haven’t done so yet.

    If you or anyone else tries it, I’d love to hear the results.

  7. gef on: April 7th, 2008 at 7:06 am

    I am wondering if I am taking the shortest way to success here, I am trying to implement a simple cms site that has bog and static content, (I tried your simplecms which is great but I still need a part of the site to be blogish).

    And I also need a easy to manage drop down menu. So I am using your suckerfish menu, but in order to map pages and post I would also like to use http://atalayastudio.com/ NAVT, a nice little plugin to create menu out of all the pages, category and post of wordpress.

    I am wasting my time using the suckerfish menu AND Navt?

    Thanks for all you are offering!

  8. Ryan on: April 6th, 2008 at 8:23 pm

    Bong (JB) - The most likely explanation is that some other CSS on your page was messing the menu up. There isn’t anything I can do without seeing the code though. Perhaps reinstall it, save the page and upload the saved page (including CSS files etc.) elsewhere. Or an setup a WordPress site for me to look at.

  9. Bong (JB) on: April 6th, 2008 at 8:14 pm

    Hi Ryan!

    I was searching for a drop down menu and I found your plugin. I followed the instructions, making sure that I got them right, several times but the menu appears as a vertical list.

    I was testing it on a live site so i took it down. I was using the latest download here.

    I am on wp2.5 and copyblogger.

    Any idea what went wrong with my install? Thanks.

  10. Ryan on: April 6th, 2008 at 8:03 pm

    This is a reply to a question from Kari Berele which was posted on the dropdown generator page:

    … I would like for one of my pages to have its own space across the top of my website, and I would like it to have its own drop down menu of about 21 items. Is that possible? …

    I’m not entirely sure what you are wanting to do. Do you want an extra menu item with a customisable list of items under a specific page? If so, try the Beta plugin instead. You can add custom code to the menu and can exclude pages, categories etc. where necessary.

Leave a Reply