CSS List Menus
At one time, most websites had simple text links. Even an experienced web designer would, at best, organize some type of simple text list or table for their menu. If they wanted something more fancy (i.e. mouseover effects or image backgrounds) the only way to accomplish it was with an external plugin, such as Java. That often slowed websites to an unusable state.
CSS changed all of that, providing web designers with styling flexibility in lists, particularly when used to make menus. Without using Java, Flash, or even Javascript, you can have elegant looking menus that are fast and standards-compliant.
Getting Started
First we should define a few terms. A “list” in HTML lingo refers to the sets of tags used to list a number of items, either sequentially or not. A sequential list is called an “ordered list” and is represented by the <ol> tag. A non-sequential list is called an “unordered list” and is represented by the <ul> tag. In web browsers, the default ordered list will have Arabic numbers and look like this:
- Roger
- Lila
- Cal
- Ming
An unordered list will use bullets by default and look like this:
- Eggs
- Cheese
- Milk
- Bread
- Juice
The first step to creating a list menu is to make the actual list in your HTML file. Create a div container for the list, which will allow you to place it where you want on the page. The <ul></ul> tags will surround each list item <li>:
<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
Next, add id’s to the list tags to identify them in your CSS file.
<div id="navcontainer">
<ul id="navlist">
For a basic navigation list, that is all you have to do to create it. If you want to manipulate backgrounds, colors, hover actions, and more, the rest of your work will take place in the CSS file.
CSS Settings
Find a good spot in your CSS file, or create a new one. Begin by adding the navcontainer id and assigning a width to it:
#navcontainer { width: 200px; }
The next step will be to specify the style and attributes of the unordered list as a whole:
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, Arial, sans-serif;
}
Rather than displaying a style of bullet or numeric character, “list-style-type: none” will remove all list-item markers and leave only the words in the list.
The next items to configure are the list items themselves. In this case, you will style any list item in the container with an “a” link tag.
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
color: #fff;
background-color: #1A5101;
border-bottom: 1px solid #E9F1D9;
text-decoration: none;
}
The element “display: block” tells the list item to take up the full width allowed for it and to place a line break before and after each item. This will essentially make vertical buttons. The “text-decoration: none” removes the underline from the link.
Finally, specify the style of mouse-over for the buttons. In CSS the mouse-over effect is called “hover”, and an item’s style can be changed however you like, when the mouse pointer hovers over it. In this case, we will only change the background color and text color.
#navcontainer a:hover
{
background-color: #DEF1DE;
color: #1A5101;
}
That is all it takes to create a vertical menu using CSS. If you would like to try out your own versions, you can download the HTML and CSS files and customize them however you wish.
Horizontal Menus
With just a few lines of code, you were able to create a vertical menu with CSS. You can use a similar process to create a horizontal one. The first thing you should know is that you do not have to change the HTML code at all. You can use the exact same HTML file and just change the tags in the CSS file to morph your list into a horizontal menu.
For the horizontal list, you will apply styles to the #navlist id rather than the #navcontainer. Changing the list from vertical to horizontal actually only requires one small tag change from “display: block” to “display: inline”.
#navcontainer {
padding: 0;
margin: 0;
text-align: center;
}
ul#navlist
{
background-color: #1A5101;
padding: 5px 0 5px 0;
white-space: nowrap;
font-family: Verdana, Arial, sans-serif;
}
#navlist li
{
list-style-type: none;
display: inline;
}
#navlist a
{
padding: 3px;
}
Notice the “white-space: nowrap” element, which prevents the list from wrapping at the end of the line when there is white space. Also notice that you can remove the “width” setting, but you are free to add a height setting, if you want to change the height of your menu.
Like the vertical menu, the next step is to specify the colors and behavior of the links and mouse hover effect.
#navlist a:link, #navlist a:visited
{
margin: 0 3px 0 3px;
padding: 1px;
color: #fff;
border: 1px solid #fff;
text-decoration: none;
}
#navlist a:hover
{
background-color: #DEF1DE;
color: #1A5101;
}
With just those CSS tags, your vertical menu will now be a horizontal menu. You can view the HTML and CSS file for the horizontal menu and customize it to your liking.
Background Images
If you have a particularly fancy website, you may find simple solid background colors for your buttons to be too plain. With CSS you can create background button images for normal and hovered states, without using javascript or any other additional code. We will use the first vertical menu example as our template and only change a few settings.
First, create images, and make sure they are the exact size of the buttons you want to display on your page. Create one button image for the normal state, save it, and then alter that image (i.e. make it lighter, darker, or a different color) and save it under a different name for the hovered state.
In the “navcontainer a” tag, you need to add a “background-image” element that will take the place of the background color:
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
color: #fff;
background-image: url(images/normal.png);
background-color: #1A5101;
border-bottom: 1px solid #E9F1D9;
text-decoration: none;
}
Next, edit the “navcontainer a:hover” tag to use the hovered state image:
#navcontainer a:hover
{
background-image: url(images/hover.png);
background-color: #DEF1DE;
color: #1A5101;
}
Now, each button will have a background image that may look like any type of button you want, depending on your graphic design, and will also seamlessly change to another image when hovered. Be sure to keep the image file size small so that there is no delay when users hover their mouses over the buttons.
There are a multitude of other styles and techniques for making CSS list menus. Experiment, find new ways to beautify your websites, and share your discoveries.
