WordPress Dropdown Menu Plugin

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.

388 Responses to “WordPress Dropdown Menu Plugin”

Pages: « 3934 33 32 31 30 [29] 28 27 26 25 241 » Show All

  1. Ryan on: March 31st, 2008 at 10:14 am

    No, I don’t have a donate page, although I will definitely be adding one now. I do my best to make plugins which people find useful and am honored that you would consider donating money to me :) In the mean time, you can PayPal money to ryanhellyer@hotmail.com.

    To be honest I can’t remember what features I’ve included in the latest beta version of the plugin, but I’ll take a look later tonight and let you know then.

    I’ll email details for costs for a custom menu. With a custom coded menu you can have pretty much whatever you want in your dropdowns.

  2. Karim on: March 31st, 2008 at 8:43 am

    Ryan,

    Suggestion/Question,

    Two things,
    1. This new version is incredible, thank you again, Do you have a donate page?

    2. The Custom menu option for Item 1 is great! is there a way to make the custom menu the last one used? for example number 6? If not can I suggest it for a later version.

    Please let me know if it is possible, of if it would be coming soon? Maybe give me a estimate if this is a feature you would charge for?

    Thanks again..

  3. Ryan on: March 29th, 2008 at 12:10 pm

    Dave - I can’t see any problems with your site going under your main content. Is it the main chunk of text on your page which is the problem or your sidebar?

    I saw the code I assume you were talking about above in your site too. Adjusting margins is a handy way to move the dropdown around, but I’m not sure I want to delve too deeply into teaching HTML/CSS here as there is a whole swathe of different methods to positioning such things and it entirely depends on the situation at hand.

    Relative, absolute and fixed positioning all have their place, as do floating and inline methods of displaying the dropdown menu and I’d really need to provide tutorials on all of those things. The complicated part is preparing the CSS in the first place, position the menu is usually the easy bit.

    I may provide some examples of how to position the menu on the page, but I doubt that will be for quite some time.

  4. Ryan on: March 29th, 2008 at 12:02 pm

    Dave - WordPress swallowed your code. You need to remove any <’s and >’s and replace them with /< and /> to display codes here. Feel free to email the code to ryanhellyer@hotmail.com and I’ll edit your comment with the correct code.

    Sidebars can be any part of your theme you want them to be, it depends on what code you put into your sidebar file/s. Although they’re generally considered to be the blocks of links/info on the left and right hand side of blogs. My sidebar is on the right and contains my blogs navigation.

    The problem with your menu going behind the content is caused by the use of positioning and z-indexes in your theme. I’ll take a look at your site and see what I can do to fix it.

    The RSI is much better now, thanks for asking :) Serves me right for using my laptop while cooped up in an awkward position.

  5. Dave on: March 29th, 2008 at 11:55 am

    HEllo Ryan!

    Love your dropdown menu. Have been looking for something like this for some time.

    I saw that there were some questions about positioning the menu bar. In reading through the different questions and answers on your page, I came up with the following:

    If you put this line just above the line in the header.php, you can place the menue anywhere you want on the header by manipulating the different px numbers, make it as wide, narrow, etc. as you like. Perhaps you can include this in your Suckerfish Dropdown Generator page.

    My problem is that the menu goes behind the main page. I saw where others had it going behind the sidebars, but did not know if, being new to this, if all of the sections are called sidebars. I used the fix above to raise the menu so it could be used, but it looks kind of odd. Can you help?

    Also, hope you are feeling much better and have completely recovered from the RSI.

    Thanks

  6. Ryan on: March 29th, 2008 at 11:53 am

    Radu - Thanks. Have added your link to the list of live examples.

  7. Radu on: March 29th, 2008 at 11:51 am

    Hi

    Just to let you know that I’m using your wordpress plugin on my website at http://www.medicina-muncii.com and I’m thrilled with it.
    Many, many thanks !

    Best regards
    Radu

  8. Ryan on: March 27th, 2008 at 8:01 pm

    Shane - Have you modified the CSS output from the generator? The following doesn’t look it is from the generator:
    #suckerfishnav li li {
    padding-right:1px;
    width:200px;
    border-bottom:0px solid #aaa;
    }

    #suckerfishnav li li a {
    padding:4px 10px;
    width:100px;
    }

    The two widths should be the same, not different.

    Also, you are styling the menu via the #menu in your style sheet along with some direct styling of ALL unordered lists. If you remove those you may find it behaves better.

    You have the main text colour the same as the background of the menu too, so you won’t be able to see what each menu item is until you have moused over them.

  9. Ryan on: March 27th, 2008 at 7:53 pm

    Michael - Thanks for the link. I’ll add it to my list of example sites tonight probably.

    To make the parent links unclickable, you will need to edit the code by hand to remove the URL. Copy the list from the source code generated on your page, and remove the URL from whatever links you want to be unclickable, then paste it into the “Custom code” option in the admin panel.

    Oh yeah, the above instructions only work for the beta version of the plugin. For the current version, you would need to paste the links directly into your theme file instead of using the < ?php suckerfish(); ?> function.

  10. Michael on: March 27th, 2008 at 7:50 pm

    Hi Ryan,

    Just wanted to let you know I am using your suckerfish plugin here: http://www.dolcefine.com. Thanks!

    One question: is there a way to make the parent links unclickable?

    Thanks!

    Kindly,

    Michael Shearer

Leave a Reply