Creating Horizontal Menus
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.
Creating a Horizontal Menu
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="home.hmtl">HOME</a></li>
<li><a href="proudct">PRODUCTS</a></li>
<li><a href="contact">CONTACT US</a></li>
<li><a href="http://www.webxervice.com">WEBXERVICES</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):
- HOME
- PRODUCT
- CONTACT US
- WEBXERVICE
Applying the CSS
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:
- HOME
- PRODUCTS
- CONTACT
- WEBXERVICES
