WordPress Canada

How To Build Horizontal Menu

So you've been searching high and low for that perfect WordPress theme when you think you have finally found it. But wait. It doesn't have a horizontal navigation menu. Drats! Relax because I'll show you how to build one in no time at all. In fact, you'll be surprised at how easy it is.

Many people prefer a horizontal menu as it saves precious sidebar real estate. I know I do. When I first started to dissect this site's theme one of the first things I did was build 2 horizontal navigation menus, one to display pages and the other to display categories. This is what gave me the idea for this post. I thought perhaps there might be someone out there wondering how to do it.

Most horizontal lists appear below the header so that is the placement I'm going to work with. As a working example I'll be using the Spicy Topography theme by DivitoDesign freely available at the WordPress Theme Directory. Here is a screen shot of that theme as it appears in the WP Theme Directory.

Open up header.php and at the very bottom below the header DIV insert the following ...

<div id="navmenu">
  <ul>
    <li><a href="<?php echo get_settings('home'); ?>/">Home</a></li>
    <li><?php wp_list_pages('title_li='); ?></li>
  </ul>
</div>

What we have just done is create a list of pages along with a link to the home page. This will appear as a vertical list below the header. By default, a list appears vertically with each line containing what is called a bullet before the line's content. What we need to do is remove the bullets and set the list to appear horizontally rather than vertically. Here is some generic code to do just that ...

#navmenu ul {margin: 0; padding: 0;
   list-style-type: none; list-style-image: none;}
#navmenu li {display: inline;}
#navmenu ul li a {text-decoration:none;  margin: 4px;
   padding: 5px 20px 5px 20px; color: #fff; background: #000;}
#navmenu ul li a:hover {color: #000; background: #fff;}

The above styling has set the nav menu's margin and padding to 0 and removed the bullets by setting list-style-type to none. It tells the browser to display the menu horizontally by display:inline. Links in the menu have a margin of 4px while padding is set at 5px for top and bottom and 20px for left and right. Link colours are white with a black background. When hovering over links they will appear reversed - black on a white background. A fairly basic menu and one you can customize a million different ways.

Getting back to our working example, the Spicy Topography theme, here is a screen shot of it in a sandbox of mine with the nav menu styled to fit the rest of the theme.

Here is another screen shot illustrating the use of dynamic highlighting.

This is the styling used to achieve it.

#navmenu {background:#FFEFEF;height: 25px !important;margin: 20px 0px 0px 0px;
padding: 5px 0px 0px 0px;border-top:1px solid #FFAAD4;border-bottom:1px solid #FFAAD4;}
#navmenu ul {margin:0;padding:0;list-style-type:none;list-style-image:none;}
#navmenu li {display: inline;}
#navmenu ul li a {text-decoration:none; margin: 4px;
padding: 5px 20px 5px 20px; color: #222222; background: #FFEFEF;}
#navmenu ul li a:hover {color:#222222;text-decoration:underline; background: #FFCFCF;}
#navmenu ul li.current_page_item a{color:#222222;text-decoration:underline;background: #FFCFCF;}

The entire nav menu background colour is #FFEFEF with a height of 25px. Top margin is 20px while top padding is 5px. There is a solid 1px border running both on top and beneath the menu with a colour of #FFAAD4. The link items have a 4px margin with padding set to 5px for top and bottom and 20px for left and right. The colour of link text is #222222 on a #FFEFEF background. Hovering over a link item gives you a link text colour of #222222 on a #FFCFCF background with an underline appearing. To achieve the dynamic highlighting I added the .current_page_item a property and set it to the same values as hover.

Experiment away!

• RSS
• Digg This
• Tweet This
• Stumble It
• Add to Delicious