According to the traditional method, the navigation strip is composed of a graphic image placed in a row of table units. Since people are no longer recommended to locate any non-table content, many people who make Web are looking for (new) methods, with structured XHTML tags and CSS formats to create navigation bars.
A simple CSS navigation bar
The easiest solution to creating a CSS style text navigation bar may be that all links are placed in a line of text, just like an example A.
This method looks reasonable and intuitive. But the problem is, put all the links in a line of text, it is difficult to control the link between the links and the front and rear blank. So, in order to avoid all links, you will usually have to insert the pipe (vertical strip) and the non-live blank character as a separator.
As shown in the code below, it is difficult for what we have to be clear and structured.
Button 1 | HREF = "LINK2A.html"> Button 2 |
The fixed readers of this column may recognize this example is the same indication I am used on another CSS button. One place in this tip is that this marking is the same for all buttons, whether they are stacked into a column on the side of the main text, or in the navigation bar above the top of the page.
Below is the CSS code listing the text link list into the 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 containing the DIV containing the navigation bar link.
The Div # Navbar2 UL style contains margin and padding declarations to enforce the default blank assigned to the unordered list, and set the overall format of the text. White-Space: NOWRAP declaration will ensure that the list is displayed in a horizontal row, even if the browser's window is too narrow, the entire row cannot be displayed.
The truly secret of this technique is in the Div # Navbar2 Li style. List-style-type: None declaration will delete Bullets that are usually used to mark each list item; and display: inline declaration will allow the list item to float from left to right on the page without letting each item appear separately In the line.
Another key element of this tip is Div # Navbar2 Li A rule. Text-Decoration: None declaration will delete the link commonly used in the link, and the Padding: 7px 10px declaration is used to control the gap between links (between the navigation strips). The left and right gaps are used to control the horizontal interval, and we need top and bottom gaps, allowing them to full navigation strips for the color background of the scrolling effect (and clickable area of the button). You can also join the left and right blank values, if you want to add more blank words between the buttons.
Finally, the rules for the Link,: Visited and: HOVER PseudoClasse are set for the color change of the scroll.
You can change this basic skill to create a lot of different navigation strips, including the popular "Directory tab" style.
