Create a horizontal navigation bar with a pure CSS

css| Create

According to the traditional method, the navigation bar consists of a graphic image placed in a row of table cells. Since people no longer recommend using tables to locate any page content that is not tabular, many web-makers are looking for (new) methods to create navigation bars with structured XHTML markup and CSS formatting.

A simple CSS navigation bar

Perhaps the easiest way to create a CSS style text navigation bar is to put all the links in one line of text, just like in example a.

This approach seems reasonable and intuitive. The problem is that it's hard to control the gaps between links and both before and after you put all the links in one line of text. So, in order to avoid all the links being squeezed together, you end up usually having to insert a line (vertical bar) and a blank character that is not wrapped as a separator.

As the following code shows, it's hard to see the clear, structured markup we want.

<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 want to apply the extra CSS style you need to create a button background and scrolling effect, you'll want to add a <span> tag so that the label becomes even more confusing.

List-based CSS navigation bar
Another way to create CSS navigation bars is to use the <ul> and <li> tags to mark links as unordered lists (unordered list).

At first glance, the use of an unordered table to the navigation bar seems counterintuitive, as we are accustomed to using the unordered list as a vertical, bullet, each of which is preceded by a single line. This does not seem to conform to the horizontal direction of the navigation bar habit.

However, the logical structure of the list as a collection of stand-alone list items can be applied to links in the navigation bar, while the CSS rules allow you to force the default representation of list items to eliminate bullet and arrange list items to float on top of the page rather than underneath it.

With this in mind, let's take a look at example B, creating a CSS style and XHTML-labeled navigation bar based on an unordered list.

The following is the XHTML logo:

<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>

A regular reader of this column might recognize this example as the same label I used on another CSS button. One of the attractions of this technique is that the logo is the same for all buttons, whether they are stacked vertically on one side of the main text or horizontally at the top of the page.

The following is a CSS code that converts a list of text links to a navigation bar:

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;
}

The DIV#NAVBAR2 style sets the size and background of the div that contains the navigation bar links.

The DIV#NAVBAR2 UL style contains margin and padding declarations to force the substitution of the default whitespace assigned to the unordered list and to set the overall format of the text. The White-space:nowrap declaration guarantees that the list is displayed in a horizontal row, even if the browser's window is too narrow to display the entire row.

The real secret of this technique is in the div#navbar2 Li style. The List-style-type:none declaration deletes the bullet that is typically used to mark each list item, and the Display:inline declaration allows list items to float from left to right on the page without having each item appear in a separate row.

Another key element of this technique is the div#navbar2 li a rule. The Text-decoration:none declaration deletes the commonly used underline of the link, and the PADDING:7PX 10px declaration controls the space between the links (between them) in the navigation bar. The left and right gaps are used to control the horizontal interval, and we need the top and bottom clearances to fill the entire navigation bar with the color background of the scrolling effect (and the clickable area of the button). You can also add blank values to the left and right, if you want to add more space between the buttons.

Finally,: Link,: Visited and: The rules of the hover pseudo class (Pseudoclasse) Set the color changes used for scrolling effects.

You can change this basic technique to create many different navigation effects, including the popular "Directory tab" style.