Phil Parsons

Building a horizontal drop down menu for wordpress categories and pages

With a little CSS and JQuery you can create a pretty cool drop down menu for your sub categories or pages in your wordpress themes. Here’s how…

View the demo

Setting up the pages

When you create your pages or categories to be displayed as sub pages/categories in wordpress you will need to make sure that you select the parent page you want them to display beneath from the drop down in the attributes box within the edit page section. You can also allocate a menu position for your pages, 0 being the top layer.

Getting the list items

Wordpress has two nice little functions for this; wp_list_pages() for the pages and wp_list_categories() for the categories. These functions take several paramaters which can be further investigated in the Codex. For this example I’ll use the list pages example and show an easy way to have your navigation menu drop down to show the sub pages when the user hovers over the link to the parent page.

The HTML

To get our list set out we need to set the HTML/PHP out as below:

<ul id="nav">
<?php wp_list_pages('title_li=') ?>
</ul>

This handy function will loop through our pages and print them out as seperate list items, sub lists and links with the hierarchy we set up for our pages, nice. You will need to add the ‘title_li=’ argument so that it won’t display the default “Pages” heading for the list items.

The CSS

I won’t explain the CSS in to much detail as you will probably have your own set up that you want for your theme.

ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

ul#nav li
{
	float: left;
	position: relative;
	width: 148px;
	margin: 0 20px 0 0;
}

ul#nav li a
{
	display: block;
	padding: 5px 10px;
	border: solid 1px #000;
	color: #fff;
	background-color: #000;
	text-decoration: none;
	font: 12px Tahoma, Geneva, sans-serif;
}

ul#nav li a:hover
{
	color: #000;
	background-color: #fff;
}

ul#nav li ul
{
	position: absolute;
	top: 100%;
	display: none;
}

Ok so the things to be noted here are that the main list items are set to float left with their position set to relative so that we can position our sub menus nicely below the parent page links. The sub menu list is set to absolute positioning with a top position of 100% so it displays nicely below the parent li link and they have display set to none so they don’t show initially when the page loads.

The JQuery

With the JQuery we will use the hover method to show the hidden menu when the user hovers over the parent li and hide it again once they move off.

    	$(function() {
			$("#nav li").hover(
				function() {
					$("ul:hidden", this).slideDown(300);
				},
				function() {
					$("ul", this).slideUp(100);
				}
			);
		});

The code is pretty self explanatory really, we grab all the nav list items and when the user hovers over one of them we slide the hidden ul down into view if it has one and then slide it back up again after they move off. So simple, you have to love JQuery for that. Another good point with this approach is that if the user has javascript disabled in their browser then the menu will just show the main pages and not the sub pages as we set them to display none in the CSS.

You can view a demo of the menu in action here

Posted on June 12th, 2009 under JQuery tips, Wordpress tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.