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: « 39 … 36 35 34 33 32 [31] 30 29 28 27 26 … 1 » Show All
Nicole on: April 2nd, 2008 at 5:51 am
Hello again Ryan
I wanted to mention that both version 1.6.2 stable and 1.9.1 beta appear to give the “Sfhover is undefined error” in IE7. I believe the problem lies somewhere in suckerfish_keyboard.js but was unable to resolve it myself.
Cheers and thanks again for the plugin!
Bill Hobbs on: April 2nd, 2008 at 5:24 am
On one site where I installed this excellent plug-in, sub-categories appear in the main drop-down menu rather than off to the side of their parent category. Other sites where I installed it, they appear off to the side. Is there some setting which affects this?
Ryan on: April 1st, 2008 at 9:31 pm
Other Ryan - Your .Main and .MainMenu classes will be held somewhere in your themes .css files. The HTML for them is probably somewhere in your header.php file.
I tried removing those and the menu is still messed up for you unfortunately. I’m too busy at the moment to do this, but if you get in touch via my Contact Page I’m happy to give you a price for a customisation - I can make time for paid work.
Good luck with the menu
Ryan on: April 1st, 2008 at 8:34 pm
Well I didnt know we had to use the generator. I have added the default wordpress theme css code in the admin area and now the buttons dont show up untill you hover your cursor over it and they still dont have a pull down menu.
For the .menu and .mainmenu classes where exactly do I go to find where to remove these?
Ryan
Ryan on: April 1st, 2008 at 7:15 pm
Other Ryan - On second thought, you may need to remove the .Menu and .MainMenu classes from your themes CSS.
If you have any more difficulties, just post back here and I’ll see what I can do.
Ryan on: April 1st, 2008 at 7:13 pm
Other Ryan - You had me stumped! I couldm’t track down the problem at all until I inspected your CSS for the plugins style sheet and saw that you did not have anything in your CSS file. You need to go grab some CSS code from the Dropdown Generator page and add that into the textarea on the admin page and it should (in theory) work fine.
Ryan on: April 1st, 2008 at 6:17 pm
Hey Ryan I ran across your drop down menu and would love to make it work on my blog. I tried the stable version and also the beta version but I cant seem to get the menus to come down. The buttons appear but the menus just dont come down. Any help will be appreciated. Thanks.
Ryan
Ryan on: April 1st, 2008 at 9:07 am
Robin - Are you having this trouble on all themes including the default? Or is it just on your specific theme?
Ryan on: April 1st, 2008 at 9:06 am
Iaan - Yep, but that’s a paid service I offer as it requires quite a bit of modification to the existing CSS. Contact me via my contact form for more information.
Robin on: April 1st, 2008 at 4:13 am
The dropdown menu does not work in some renderings of IE6 for windows. I’m not sure why and it’s hard for me to test since I don’t have easy access to a machine with IE 6.
Leave a Reply