Create a pure CSS horizontal navigation bar

Author：Eve Cole Update Time：2009-05-31 00:49:43

A navigation bar consists of a graphic image placed within a row of table cells. Since using tables to locate any non-table page content is no longer recommended, many people making the Web are looking for (new) ways to use structured

XHTML markup and CSS formatting to create navigation bars.

A simple CSS navigation bar

Perhaps the simplest solution to creating a CSS-style text navigation bar is to place all links on a single line of text, as in Example A.

This approach seems reasonable and intuitive. But the problem is that putting all the links in one line of text makes it difficult to control the white space between links and before and after them. So, to avoid having all your links crowded together, you'd better

After that you usually have to insert pipes (vertical bars) and non-newline whitespace characters as delimiters.

As the code below shows, the result is hardly the clear, structured markup we want.

The following is the quoted content:
<div id="navbar1">
<a href="link1a.html">Button 1</a> | <a
href="link2a.html ">Button 2</a> | <a href="link3a.html ">
Button 3</a>
</div>

If you add the <span> tag in order to apply the additional CSS styles needed to create the button background and scroll effects, the markup will become even more confusing.

List-based CSS navigation bar Another way to create a CSS navigation bar is to use the <ul> and <li> tags to represent links as an unordered list.

At first glance, using an unordered list for a navigation bar seems counterintuitive, because we are used to thinking of an unordered list as a list of items pushed up vertically, with a Bullet in front of each one. This seems inconsistent with the horizontal orientation of the navigation bar.

However, the logical structure of a list as a collection of independent list items can be applied to links in the navigation bar; and CSS rules allow you to force override the default presentation of list items, eliminate bullets and arrange list items on the page instead of float below.

Knowing this, let's now look at Example B, creating a CSS-style and XHTML-labeled navigation bar based on an unordered list.

Here is the XHTML markup:

The following is the quoted content:

<div id="navbar2">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>

Regular readers of this column may recognize this example as the same label I use on another CSS button. One of the attractive things about this technique is that the label is the same for all buttons, whether they are stacked vertically in a column to the side of the main text, or placed horizontally in the navigation bar at the top of the page.

Here is the CSS code to convert a list of text links into a navigation bar:

The following is the quoted content:

div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #336699;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 lia:link {
color: #FFF:
}
div#navbar2 lia:visited {
color: #CCC;
}
div#navbar2 lia:hover {
font-weight: bold;
color: #FFF;
background-color: #3366FF;
}