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 … 11 10 9 8 7 6 5 4 3 2 [1] Show All

  1. Ryan on: January 22nd, 2008 at 8:53 pm

    witchypoo - I hadn’t thought of the sub menus blowing out the side of the screen like that. The easiest solution to get around that is to decrease the font size in the CSS a notch or two. To use the simplified template code, you need to download the new version of the plugin and replace you existing files with it. You don’t need to deactivate and reactivate it, the changes will be automatic. Your old code will still work with the new plugin too, so if you change your template code after installing the new plugin you won’t have any downtime. But if you use the new code now your WordPress install will probably report an error I assume (I haven’t tried it).

    BG - Where you put the code is entirely up to you. It depends on where exactly in your blog you want it to appear. Usually you would place it towards the end of the file. If you would like specific help with your theme, drop me a line via my contact page and I’ll help you from there.

  2. BG on: January 22nd, 2008 at 8:35 pm

    Hi, wondering where exactly in the header.php file one should place your code in?

  3. witchypoo on: January 22nd, 2008 at 1:54 pm

    Because the navbar uses the entire width of the layout, and Categories is the last item on it, the sub sub menus fly out to the right, so are unreadable. I think I can fix that in the css, but you may want to consider it as you have for including a home link. Again, I fixed that myself, but some folks are scared to mess with CSS.
    I like the one line of code, I might just swap it out with the code I put in yesterday, should I de-activate the plugin first?

  4. Ryan on: January 22nd, 2008 at 5:33 am

    I’ve uploaded version 1.03 of the plugin. The new version essentially functions the same, but I’ve added a simplified method for displaying the various menu options. Hopefully this will make things a little easier for beginner WordPress’ers.

    EDIT: We’re now up to Version 1.04 as I had to do a bunch of modifications under the skin for submission to the Official WordPress Plugins directory

  5. Ryan on: January 22nd, 2008 at 1:41 am

    Glad to hear you like the plugin :) I’ll provide an example of how to add a home page button on the demo page tonight.

    EDIT: New version has this functionality built in via the function suckerfish().

  6. witchypoo on: January 21st, 2008 at 11:55 pm

    I would love to have a home link on my navigation bar. Love the plugin!

  7. Driving my Inner Geek Insane | Psychicgeek on: January 21st, 2008 at 10:22 pm

    […] down dyamically populated navigation bar, courtesy of a WordPress Plugin which you can read about here This page only shows the simple code for your pages, but I wanted to have my archives and […]

  8. Ryan on: January 19th, 2008 at 8:38 am

    Good to see you guys like the concept. I’ve now updated it with a much better looking design and it works in all browsers I’ve tested on so far (IE6, IE7, FF2, Safari3, Opera9).

  9. str3ss on: January 16th, 2008 at 1:52 am

    Hey Ryan ::

    This look interesting!

    Like the idea of SuckerFish + WordPress, good stuff!

    I took a look at your demo in Safari 3 (Win/Mac) and the nav positioning is off about 20px to the left.

    Can’t wait to try this on some of my WP installs. This is a fantastic idea, thanks for doing the dev!

  10. Chris on: January 14th, 2008 at 10:29 am

    Hey Ryan,

    I’d really love a nicer-looking version of this plugin. Drop-downs are pretty cool, so keep working on it an it could end up being a really popular gizmo!

Leave a Reply