Adding Horizontal CSS Drop Down Menus to Your Theme in WordPress 3.0

Posted by | WordPress | 2 Comments
  • November 08, 2010

WordPress 3.0 adds custom menu functionality to wordpress. In simple terms, this means that you can build your own navigation menus in your theme, easily choosing links to pages, categories and even external links.


Custom Sub MenuThe WordPress Custom menus allow for very easy, drag and drop sub menus to be built and it does not take a lot of work to turn these sub menus into search engine friendly, css drop down menus for your custom wordpress theme.

This tutorial will take you through the everything you need to add to your php template and your css code in order to add great looking horizonal css drop down menus to your custom wordpress theme.

Step 1: Adding Custom Menu Support to your custom WordPress theme

Very simply, all you have to do is open your functions.php file. This is located in your theme directory. If you don’t already have one, create one.

Add this code:

function register_my_menus() {
	register_nav_menus(
		array(
			'top-nav' => __( 'Top Nav' )
		)
	);
}

This code simply tells wordpress that you have 1 menu position in your theme, called “Top Nav”.

If you now go to admin-appearance-menus you can then create a new menu.

Give your menu a name like Main Menu and click “Create Menu”

You should then see something like this:

Create Custom Menu


From here, you can very easily add pages, categories and custom links to your menu, so build yourself a menu.

You can drag and drop menu links into the order that you want and if you drag a link to the right, it makes it a sub-menu item of the item above.

Do not forget to click “Save Menu” when you are done.

Step 2: Adding the Custom Menu to your Custom WordPress Theme

You may have noticed that although you have built a lovely new custom menu, it is not visible when you look at your WordPress site.

This is because you now need to add the custom menu to your custom theme.

If you are using a header.php file, you need to add something like the following code to the header.php file (in the position where you want your nav menu)

<!--?php wp_nav_menu( array( 'theme_location' =--> 'top-nav' , 'container_class' => 'menu-header' ) ); ?>

This code tells WordPress that this is the “Top Nav” position for your menu. It also tells WordPress to put the menu in the “menu-header” container class -the reason for doing this will become apparent later.

Looking at you WordPress site, depending on your css, you should see something like this:


Basic Un-numbered List


In order to make this into a nice, horizontal, drop-down menu, we need to style it with some css.

Step 3: Styling Your Custom WordPress Horizontal Drop-Down Menu with CSS

The Custom WordPress Menu that you have produced is an un-numbered list and if you look at the source code that is produced, it will be something like:



This is basically an un-numbered list (ul) – the submenu items are ‘nested’ in another un-numbered list.

It may look nasty at the moment but this can all be fixed with css and it is worth noting that un-numbered lists are the most search engine friendly menus to use in your WordPress site.

Making the List Horizontal and Removing the Bullets

Add the following to your style.css file:

.menu-header {
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 42px;
}
.menu-header ul,
	div.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-header li,
	div.menu li {
	float: left;
	position: relative;
}

This should make your Custom WordPress menu start to take shape. It should now be horizontal with no bullets and the submenu should appear underneath, something like this:
Horizontal Un-numbered List (UL)

Positioning and Hiding the Submenu

The submenu needs to be hidden (we will make it appear on hover later). Add the following css to your file:

.menu-header li,
	div.menu li {
	float: left;
	position: relative;
}

.menu-header ul ul {
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}

This will make the menu look something like this:
Horizontal Menu Hidden Sub Menu

Better Colouring and spacing things out

We can then change the font colours and styling and space out the links:

.menu-header a {
	color: #aaa;
	display: block;
	line-height: 41px;
	padding: 0 10px;
	text-decoration: none;
	font-weight: normal;
}

So, our menu will then look like this:
Spaced Horizontal Menu

Adding the Hover

To make the sub-menu appear, we need to use the :hover pseudo-class.
Add the following css:

.menu-header ul li:hover > ul {
	display: block;
}

We can also add some colouring to the hovering menu:

.menu-header li:hover > a,
.menu-header ul ul :hover > a {
	background: #333;
	color: #fff;
}

This should give you the following:
Basic Drop Down Menu


The hover should work in all browsers.

Styling the Submenu

We need to make the submenu vertical and give it some colour.

.menu-header ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}

To match the colourscheme, we are going to give the whole nav bar a black background by adding:

background-color: #000;

to the menu-header class, so you end up with:

.menu-header {
	background-color: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	height: 42px;
}

We are now nearly there.

Highlighting the Current Page

WordPress adds classes to the current menu item. You can use this to style them. Try adding this to your css:

.menu-header ul li.current_page_item > a,
.menu-header ul li.current-menu-ancestor > a,
.menu-header ul li.current-menu-item > a,
.menu-header ul li.current-menu-parent > a {
	color: #fff;
}

This highlights the current item, making the font white.

The finished product:
CSS Drop Down Menu - WordPress


So, there you have it. Proper CSS Custom Drop Down menus in WordPress!

Share This

Emile

About Emile

Emile is the director of Acroweb. He is a Wordpress and Drupal web developer and project manager with an extensive knowledge of web strategies and SEO. He lives on the South Coast UK with his wife and daughter and spends a lot of his time chasing waves and wind around the country.

  • Ali Noman

    Hi, thanks for the tutorial.. I am learning wordpress, so it helped me a lot.. However I am having issues with the sub-menu, if I select dept->4, it messes with the drop down menu and doesn’t work properly.. Any help would be appreciated.. cheers

  • Phoenix

    Great tutorial my friend, saved in my bookmarks, thanks a lot ;)

Have a project that you want to talk about? Get A Quote