Languages: English • 한국어 • (Add your language)
Horizontal Menus are an excellent way to create a menu of categories or Pages, highlighting specific areas of interest within your website. Many web designers place a horizontal menu under the header, where they draw the eye.
Horizontal menus are created with the HTML List feature. Yes, while they are horizontal instead of vertical, like typical lists, they are still a list. CSS presentation styles allow us to set the list to run on one line instead of a separate line for each list item.
Since horizontal menus are simply lists in a horizontal line, let's start the process with a list.
Below is the simple list for our horizontal menu. We recommend you keep your list small as too many will stretch wide across the screen and may cause some layout problems. We've enclosed the list in a division called navmenu.
<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<li><a href="wordpress/recipes/">RECIPES</a></li>
<li><a href="wordpress/travel/">TRAVEL</a></li>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>
As you can see, within our list we've included a PHP tag for the "home page" and several categories, as well as a link to WordPress, those helpful folks. The list would look like this, in its simplest form (as styled by the Codex):
You can also use the wp_list_categories() template tag to list your categories. If you just want categories 1, 3, 4, and 5 listed and the rest excluded, your list might look like this:
<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php wp_list_categories('orderby=name&include=1,3,4,5'); ?>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>
The place to put your new list might be just under the header. In WordPress v1.5, open the header.php file in the WordPress Theme folder you are using. Paste the code at the bottom of the file after the header DIV and then save the file.
In WordPress v1.2, open the index.php file and look for the end of the header section and place your list code there.
By default, a list runs vertically, each item on its own line. It also includes an image, known as a bullet, before each line. In your stylesheet, we need to add a reference to the navmenu and the first step is to remove the bullet and set our margins and padding to zero for the whole list.
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
If you save and upload your stylesheet, then refresh the test page in your web page browser, you would see that your list now has no bullets and no indents, if everything is working right.
Now, we need to add the technique that will set this list into a horizontal line. We need to add a style reference to the list item itself.
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
Because these are links, we have to take a moment to clean up the look of the links. There are many things you can do to style this list, but for now, let's add some space to the list of links so they aren't crowded together and remove the default link underline and have the link change colors when the mouse moves over it.
#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }
Okay, we can't resist. Let's take this another step further and give our new horizontal menu list some real jazz. See if you can tell what is being done to change the look.
#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: blue;
background: pink;}
#navmenu ul li a:hover {color: purple;
background: yellow; }
If we did this all correctly, your list should look like this:
One should note that the all the above will fail in browsers with CSS turned off: the <li> lists will still be formatted vertically, not horizontally.
Therefore, if one wishes to be portable to such browsers, one might use e.g.,
<p>Archives:<?php wp_get_archives('format=custom&show_post_count=1&type=yearly&after=;'); ?>
Categories:<?php echo str_replace('<br />',';', wp_list_categories('style=&show_count=1&echo=0'));?></p>
There are many different ways to style lists. Use your imagination and come up with your own design, alternating colors, or whatever you want. Here are a few resources that will help you get started and learn more about Horizontal and other special effects menus: