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 38 37 36 35 [34] 33 32 31 30 29 … 1 » Show All
Ryan on: April 5th, 2008 at 11:14 pm
Matt Gray - I suspect you are also having some troubles due to the #navigation DIV which is surrounding the menu. You may need to remove that for it to render correctly.
Ryan on: April 5th, 2008 at 11:07 pm
This is a reply in relation to question by Matt Gray on the Suckefish Dropdowns Generator page”
Hey,
Really appreciate your work on this, this plugin is one of the best!
I have a small issue - if you look at my website - http://www.dongray.co.za you will see that the menu is being repeated below the main one…do you know why this is the case?
I only have the call for the suckerfish menu in once…I think I am being silly somewhere…
I have no idea what is going on here. You have five instances of the #suckefishnav UL tag. This doesn’t make any sense to me at all. One of them is even wrapping around the other four.
Are you using the beta version of the plugin? Or the stable version? The only thing I can think of, is that you are using the Custom Menu option in the beta plugin but have messed the code up.
Ryan on: April 5th, 2008 at 10:14 pm
Mike - I’ve added your link to the list of live sites.
I’ve added an option in the new beta version of the plugin to allow for hard coding links into the dropdown just like you have. It is a good way to make sure the dropdown looks exactly how you want it. The beta plugin also lets you combine both hard coded links and the WordPress generated ones in the same menu. Using the custom code option does require knowing some HTML syntax though. I haven’t sorted an easy way to do it without code unfortunately.
Ryan on: April 5th, 2008 at 10:06 pm
Adam - If you want to add non WordPress HTML pages, you should install the Beta plugin. Don’t activate the Superfish option though as it’s still a little buggy. With the beta plugin you can add custom HTML to the menu from the admin panel.
Just add something like the following to the custom menu option in the admin panel to add your custom pages:
<li>
<a href="http://domain.com/about/">About</a>
<a href="http://domain.com/contact/">Contact</a>
</li>
Then in the admin panel choose “Home”, “Pages”, “Categories” and “Custom” for menu items #1 to #4.
Let me know if that doesn’t make sense and I’ll try to give a better explanation.
Adam on: April 5th, 2008 at 8:05 pm
I really like this plugin, but I can’t figure out how to display an assortment of pages and category links. The way I have my page laid out, I have a menu bar of category links, which opens a page of posts of each category when clicked. I also have a couple menu bar links on the end pointing to separate HTML pages. So, it’s set up as Home -> Category 1 -> Category 2 -> Category 3 (which also has one child category I wish to display when Category 3 is scrolled over) -> Category 4 -> About -> Contact, with the latter 2 being static HTML pages.
I’m not the best with code, but I can’t figure out how to customize the plugin to allow for this type of complexity; any help would be greatly appreciated!
Thanks.
Mike on: April 5th, 2008 at 2:47 am
Ryan,
Love the pluggin. I “modified” it kind of. I did not want the pages, categories, ect as the drop down options.
So I activated the pluggin and inserted the php code into a test page to see how it was laid out. I then copied the source and made my own list of links. Then I loaded that list where I wanted the nav bar to be. Works great.
I do have one issue that is not a big deal. In IE6 I if there is a sub menu to the sub menu, it is kicking way off to the side. It is maybe about 10% across the page and it is a 50/50 shot if you can make it that list before it disappears. Does that make sense?
It may be because i customized the drop down, but I don’t think so.
Not a big deal, I just don’t have any subs to the subs.
Once again, great pluggin. List me as a live user if you like. I plan on keeping it for quite a while at http://ryannewmaninfo.info.
Ryan on: April 4th, 2008 at 7:35 pm
Thanks Krusty Ruffle
I’m reading the link now. Although you are probably right, taking a look to see how other plugins works is probably the best option.
Krusty Ruffle on: April 4th, 2008 at 7:28 pm
Heh, it seems google is a little short on useful links for the whole wordpress widget thing. After a bit of digging around I found this link to the wordpress widget API at automattic.com. It has links to tutorials for themes and plugins in the first paragraph.
Honestly, I mostly just looked at other themes and plugins to see how they did it.
About those widgetized headers and footers, it is a bit odd, but it works great for things like quote of the day/random quotes, your menu plugin, things that can be long and flat. It’s not so good for things like calendars, or other stuff that works better in tall blocks. Though I suppose some of that depends on your css skills.
Anyway, good luck with all of this, I’m looking forward to seeing what happens with future versions of this plugin!
Ryan on: April 4th, 2008 at 4:35 pm
Krusty Ruffle - If you want to hurry me up with the widgetising, then send me a link to a good tutorial on how to widgetise plugins as I don’t have the foggiest idea how at the moment.
Ryan on: April 4th, 2008 at 2:12 pm
Widgetised header and footer? Interesting concept. I’d considered adding something like that to my “Aqua Vaccinium” theme but decided against as I thought people would find it odd having a widgetised header.
I’ve never tried widgetising something before, but I’m guessing it can’t be too hard. I’ll look into it some time when I’m not so busy.
I’m considering adding a flyout menu option for the plugin in the future and that would definitely be widgetised so that users could dump the flyout into their sidebar.
Leave a Reply