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 … 35 34 33 32 31 [30] 29 28 27 26 25 … 1 » Show All
Iaan on: April 1st, 2008 at 1:45 am
Great Plugin thanks!
Any way to make the menu vertical?
Ryan on: March 31st, 2008 at 9:07 pm
Jeff - Something in your themes CSS is causing all sorts of problems. I recommend not using so much relative positioning and moving to a floated layout, you will likely have less troubles integrating stuff like this that way.
If you have trouble, feel free to contact me via my Contact Form for a quote to integrate your menu for you.
Ryan on: March 31st, 2008 at 8:59 pm
Jeff - The CSS is being applied no problems. However something in your theme is interfering with it. I’ll take a look and be back shortly.
jeff on: March 31st, 2008 at 8:19 pm
I get unformatted text. Not a coder at all. Is the css being applied?
Jeff
Wp Wordpress » Blog Archive » Ryans Suckerfish WordPress Dropdown Menu on: March 31st, 2008 at 7:49 pm
[…] Visit […]
Ryan on: March 31st, 2008 at 6:23 pm
Karim - You have discovered another bug in the Beta plugin. The custom menu option is supposed to be an option for ALL of the menu items. For some reason I’ve forgotten to correct that. I’ll upload a new version shortly which will correct the problem for you.
BillHobbs on: March 31st, 2008 at 6:08 pm
This is late, but thank you. That was helpful. Suckerfish rocks.
Dave on: March 31st, 2008 at 6:06 pm
Hello!
After spending about 8 hours trying to find the offending code without success, I gave up. I know you got the code by viewing the source of the page. I just can’t figure out the WP code that generates the HTML. I put the menu at the top of the header and it serves its purpose. Don’t like it there, but can’t have everything.
Have a great day,
Dave
Ryan on: March 31st, 2008 at 6:06 pm
Dave - I think that the part of your HTML which is causing you problems is this:
<div id="post-59" class="hentry p1 page publish author-admin category-uncategorized y2007 m11 d07 h08 alt">For testing purposes, I recommend installing the latest version of Internet Explorer (IE7), Firefox, Safari and Opera. Plus a stand alone version of IE6 - regular installs copy over the top of IE7. There’s some information on installing standalone versions of IE here … http://tredosoft.com/Multiple_IE
Dave on: March 31st, 2008 at 6:00 pm
Hello!
You are fast! Thanks much. I read that you saw the code, but here it is anyway.
<div id="header"><h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p class="description"><?php bloginfo('description'); ?>
<div style="margin: 2px 125px 0px 0px;">
<?php suckerfish(); ?>
</div>
I read what you wrote about htlm etc. I don’t know that you would have to create a tutorial about it. Just plug in different values for the different px places and see what happens. That’s how I did it. Simple trial and error. Anyway, in case someone else asks, you can pass it along. BTW: what I know about code you can put on a single page of a noteit pad.
I went to my web site and still found the problem. I have two web browsers, one put out by Qwest and the other is IE. The first is Version 9.5 and the IE is 7.0.
On the home page, everything works just fine. Go to any other page and then click on the blogroll link. You will notice that the very last cell in the column goes behind the title of the page. You cannot click on it. This is why I raised the menu bar so high, so that it does not go behind the title of the page.
I readjusted the menu bar to be lower on the header so that it is easier to catch the problem. If you click on page and go to Life Journal, then run your mouse over blogroll, you will see that the menu drops down behind the page title and behind the picture. At least that is what it does for me.
Glad to hear you are feeling better. Stand up and stretch some before you answer this email Smiley emoticon
Dave
Leave a Reply