Create drop-down menus with WordPress plugins and themes
March 9, 2008 – 11:57 pm | by Miriam SchwabDrop-down menus are a great way to improve the usability of your site. They allow you to offer more information without taking up too much real estate, as well as organize your content in a useful way for your readers.
But coding a drop-down menu can be a bit of a PITA (no, not the bread that holds the falafel). Lucky for us, some of our fellow web-geeks have created easy ways for us to add drop-down menus to our websites and WordPress blogs.
WordPress Drop-down menu plugins
1. The Linux and Web Development Blog has a WordPress plugin that adds a drop-down menu to your navigation bar on your WordPress blog. In order to activate this plugin, you need to upload it, activate it, and add the following code snippet to your header file:
<?php
if (function_exists(’get_menu’))
get_menu(’topmenu’);
?>
Once you have done this, log in to your site, and customize the menu on the CSS Menu option page.
2. Ryan Hellyer has developed a super-duper plugin/generator combo that allows you to create and heavily customize a drop-down menu in your WordPress blog. Features:
- Easy to customize styles with his handy Suckerfish Dropdowns Generator
- W3C valid HTML and CSS
- Only uses Javascript for annoying browsers like IE6
- If you want your visitors to be able to access your menu with their keyboard, Ryan offers the “Suckerfish Javascript for keyboard accessibility” code for including in your site.
- Compatible with every existing browser (almost) and their uncles.
You can’t say Ryan’s not thorough! See the drop-down menu in action on the Suckerfish Dropdowns Generator page.
To use his Suckerfish WordPress plugin:
- Download the plugin from his site and activate it.
- Go over to his Suckerfish Dropdowns Generator and customize at will. You can change pretty much every style used for the drop-down: colors, background image, font sizes, families, weight, opacity, padding, etc. Ryan has also prepared 10 ready-made styles for drop-down menus that you can use instead of fiddling around with your own styles.
- Once you are ready, click Submit Query and the generator will produce some CSS code.
- Coyp and paste the code into your WordPress admin (under Options). The generated styles will only work with unordered lists with an ID of #suckerfishnav. In addition, this whole plugin/generator thing may not play nice with our least-favorite browser (IE6), so Ryan recommends using his handy Suckerfish Javascript for Internet Explorer code with your site.
3. Dtabs (Dynamic Tabs) wordpress plugin by David Burton allows themes to include an optional user controlled dynamically tabbed navigation system with the possibility of drop down menus. This plugin only works with dTab enabled themes, of which there is currently one: Kubrick Tabs. However, the author provides instructions on how to dTab enable a theme on the plugin page. You can see a working example on the author’s site. The plugin is also available on the WordPress.org plugins directory.
4. A few more drop-down menu plugins:
WordPress Themes with drop-down menus
1. The Jillij theme is a one-column theme based on Kubrick that has transformed the vertical sidebar into a horizontal drop-down navigation bar that appears under the header image. The drop-down menu is based on Widgets, so you can modify what appears on the nav bar by changing the widgets.
2. Ryan Hellyer has also created a theme that has his Suckerfish menu built-in: Aqua Vaccinium WordPress theme. I have to admit that I don’t love the look of the theme (sorry Ryan!), but the built-in Suckerfish menu can be useful for people who prefer not to use a plugin.
(Ryan does have a theme which I really like, which he uses on his blog: Hellish Simplicity.)
12 Responses to “Create drop-down menus with WordPress plugins and themes”
By Ryan on Mar 10, 2008 | Reply
Thanks for the dropdowns review Miriam
FYI, my plugin automatically adds the Javascript to keep IE5-6 happy so you don’t need to worry about that.
Most of the features you mentioned are only available in the beta plugin. Although I will probably update the stable version with that shortly - I’ll post a comment here once I’ve done that. In the mean time it’s probably safe to assume the beta is fine for use in a live site as I haven’t received any reports of it not working yet.
The keyboard accessible javascript is available as an option in the admin panel. I didn’t include the keyboard accessibility option by default as most people don’t bother with it - although I think it is a good idea as I assume there are some people who tend to ‘tab’ there way through links and they’ll totally bypass your menu if you don’t have that javascript activated.
Apart from my own plugin (which I obviously like the most, duh!) I prefer Zack Designs plugin as it creates nice bug free code which works nicely cross browser. I’m damned if I’ll be making a CSS generator for it though because there are lots of quirks with the way those CSSPlay style dropdowns work. They use some rather exotic methods to force older versions of IE to behave correctly which makes them quite difficult to style as you suit, or at least I found them difficult the last time I tried to modify one.
I’m not sure why, but something which my plugin does which I haven’t seen others do is to allow users to choose what is displayed in their dropdown menu. With the latest beta (soon to be stable release) you can choose from a combination of archives, categories, pages etc. and what order they are in your dropdown menu.
Something which I have had lots of requests for, but haven’t figured out a good way to implement yet, is the ability to exclude certain categories, pages etc. from the dropdown menu. But I am working on that and will maybe have a future release with that option included.
By Ryan on Mar 10, 2008 | Reply
BTW Miriam - we seem to have very different preferences for themes
Although you seem to agree with my previous client, as the reason I made that theme available to the public was because they didn’t like it.
By Ryan on Mar 10, 2008 | Reply
I’ve now updated the stable version to 1.6.1 (was originally the beta).
By rep mgmt on Mar 11, 2008 | Reply
very good list of drop downs for word press I like the idea of adding themes that have this function already included.
By Ryan on Mar 11, 2008 | Reply
Theme makers can include support for my plugin with the following code:
<?php if (function_exists('suckerfish')) {suckerfish();} ?>By Reliance Relocation on Mar 30, 2008 | Reply
Hi,
I’ve tried using this in my site, but instead of making the menu droppable it just messed my entire menu structure so I had to remove it.
Isn’t there any simple plugin that helps managing pages without the need to mess with code?
Thanks,
Raymond
By Ryan on Mar 30, 2008 | Reply
Nope, it’s not possible to do it without messing with the code.
If you need help getting my plugin to work on your site, then leave a comment for me on the WordPress dropdown menu plugin page and I’ll see what I can do. Usually the problem is just a simple CSS issue.
By Ryan on Mar 30, 2008 | Reply
Actually … you could have a menu which was positioned at the very top of the page without messing with code, but anything which is displayed further down you would need to delve into the code for as it will need to interact with the existing code on the page whereas you can ignore the rest of the code if you are displaying it at the top of the page.
By Di3 on Apr 15, 2008 | Reply
I sorry, my ingles is very bad…
but I´m like see a example??? Someone
send me a email With subjet “menu wordpress”
thx
Diego.
diego.burgos@gmail.com