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:

• wp_jquery_dropdownmenu plugin
• WordPress CSS Drop-down Menu

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.)

This post was originally published at Create drop-down menus with WordPress plugins and themes on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Headsetoptions has a great review of the types of tabbed interfaces available, and a tutorial on how to add one to your WordPress blog.

A tabbed interface is one of those boxes that you often see in the sidebar of a lot of premium themes where you click on tabs at the top, and it shows you different types of information in the same space. The main benefit of tabbed interfaces is that it helps save real estate on your blog, which can be pretty limited. Here’s an example from Solostream’s Premium WordPress Magazine Theme:

Solostream also has a tabbed interface for the feature article section in some of his other premium themes.

Basically, there are three tabbed interfaces available: DOMtab, Tabber, and Tabs. The main difference between the tabbed interfaces are ease of use, and whether you can use them for commercial purposes.

Update Jan. 26, 2007: Another tabbing method that wasn’t mentioned on Headsetoptions is Yahoo! UI Library: TabView.

Check out the full post for the whole shebang: Anatomy of a Magazine Style Premium WordPress Theme – Part 2: DOMTab, Tabber, more

This post was originally published at How to add a tabbed interface to your WordPress blog on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Anthology of Ideas shares his method for creating a horizontal drop-down menu for categories, involving the use of CSS and Javascript.

Displaying WordPress categories in a horizontal dropdown menu

This post was originally published at Display WordPress categories in a horizontal dropdown menu on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

This is really handy: the Drop Down Menu WordPress plugin creates a drop-down navigation scheme where sub-pages appear under their parent pages in the menu. All you have to do is upload, activate, and add one snippet of code to your template files. The menu can be styled in the styles.css file in the plugin’s folder.

See the demo here.

WordPress plugin for creating a drop down navigation menu using JQuery»

This post was originally published at WordPress plugin easily creates drop-down navigation on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

Sorry for the confusing title, but there is an issue that we face over and over when using WordPress as a CMS, and have not been able to solve. When we are using WordPress as a CMS, our Blog page doesn’t pick up the current_page_item class and therefore its link on the nav bar isn’t highlighted like the other pages are. How can we get it to change?

I know that the above might not make sense, so here is a detailed description of the problem:

If you use WordPress as a CMS, you generally create the Pages you want to appear on your nav bar under Write > Write Page. One of those Pages is the Home page, for example, and you create another Page for your blog posts called Blog. Then, you go to Options > Reading, and select one of those pages for your front page from the drop-down list, in this case you would select the Home page, and another page for your blog posts, in this case the Blog page.

You create a style in your style sheet called current_page_item which causes the current page that the viewer is on to appear differently in the nav bar or list of pages. For example, you want the background color of that page on the nav bar to change from green to purple.

Now, here’s where the problem lies: all pages on the nav bar change from green to purple when the user is on that page…except the Blog page! For some reason, that Blog page does not pick up the current_page_item class.

So my question is: does anyone know of a solution to this problem?

Thanks!

This post was originally published at WordPress challenge: getting class current_page_item to work when home page is not blog on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

This is a really amazing collection of links to code snippets for creating the following:

• Bubble tool tips
• Box-over tool tips
• Star rating systems
• Forms
• Rounded corners
• Speech bubbles (like those used in comments)
• Bar graphs
• Gallery lightboxes
• CSS image maps
• Tabbed navigation

25 Code Snippets for Web Designers (Part1)>>

This post was originally published at 25 Code Snippets for Web Designers on WP Garage - WP Garage - wordpress tricks, hacks, and tips.