Drop-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:

  1. Download the plugin from his site and activate it.
  2. 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.
  3. Once you are ready, click Submit Query and the generator will produce some CSS code.
  4. 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.)