Create a horizontal navigation bar with pure CSS

According to the traditional method, the navigation bar consists of graphical images placed in a single table unit. Since it is no longer recommended to use tables to locate any non-Table Page Content, many web users are looking for (new) methods, create a navigation bar using structured XHTML markup and CSS format.

A simple CSS navigation bar

The simplest solution to creating a CSS style text navigation bar is to put all links in a line of text, just likeExample.

This method looks reasonable and intuitive. But the problem is that it is difficult to control the gaps between links and between the front and back of links by placing all links in one line of text. Therefore, to prevent all links from being congested, you usually have to insert blank characters (vertical lines) and non-line breaks as separators.

As shown in the following code, it is difficult to make the results clear and structured.

<Div id = "navbar1">
& Nbsp; <a href = "link1a.html"> button 1 </a> & nbsp; | & nbsp; <
Href = "link2a.html"> button 2 </a> & nbsp; | & nbsp; <a href = "link3a.html">
Button 3 </a>
</Div>

If you need additional CSS styles to create button backgrounds and scroll effects for the application, you need to add the <span> label, which will make the labels more messy.

List-based CSS navigation bar

Another way to create a CSS navigation bar is to use the <ul> and <li> labels to mark the link as an unordered list.

At a glance, the use of unordered lists for navigation bar seems to be not intuitive, because we are used to using unordered lists as a list project pushed up vertically, each with a bullet in front. This does not seem to conform to the horizontal direction of the navigation bar.

However, the list logical structure of an independent list item set can be applied to links in the navigation bar. CSS rules allow you to forcibly replace the default representation of a list item, to eliminate the bullet and arrange the list items to float above the page rather than below.

Now that we know this, let's take a look.Example B, Create a CSS style and XHTML navigation bar based on the unordered list.

The XHTML labels are as follows:

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

Fixed readers in this column may recognize that this example is the same icon I used on another CSS button. One attraction of this technique is that the labels are the same for all buttons, whether they are stacked in a column on one side of the subject text or horizontally in the navigation bar at the top of the page.

The CSS code for converting the text link list into a navigation bar is as follows:

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

Div # navbar2The style will set the size and background of the DIV containing the navigation bar link.

Div # navbar2 ulStyle includesMarginAndPaddingStatement to forcibly replace the default blank space allocated to the unordered list and set the overall text format.White-space: nowrapThe statement ensures that the list is displayed in a horizontal row, even if the browser window is too narrow to display the entire row.

The real secret of this technique lies inDiv # navbar2 LiStyle.List-style-type: NoneThe Declaration will delete the bullet that is usually used to mark each list item; andDisplay: inlineThe Declaration allows the list project to float from left to right on the page, instead of displaying each project in a separate row.

Another key element of this technique isDiv # navbar2 LiRules.Text-Decoration: NoneThe statement will delete the commonly used underlines of the link, andPadding: 7px 10pxThe Declaration is used to control the gaps between links in the navigation bar. The left-side and right-side gaps are used to control horizontal intervals. We need the gap between the top and the bottom to fill the color background of the scrolling effect (and the clickable area of the button) with the entire navigation bar. You can also add blank values on the left and right, if you want to add more blank values between buttons.

Finally,: Link,: visitedAnd: HoverThe pseudo-class (pseudo class) rule sets the color changes used for the scrolling effect.

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

Transferred from: zdnet China