vertical
Home
news
contact
About level
Home News Contact About
Home News Contact About navigation bars
Skilled use of the navigation bar, are very important for any website.
With CSS you can convert into good-looking navigation bar instead of a single boring HTML code.
A list of links navigation bar =
As a basis for a standard HTML navigation bar is a must
. In our example we will create a standard HTML list navigation bar.
Navigation bar is basically a list of links, so use
-
with
- Elements very meaningful:
Examples
Now, let us delete margins and padding from the list:
Examples
ul { list-style-type: none; margin: 0; padding: 0; }
Examples of analysis:
list-style-type: none - to remove a small sign before the list. A navigation bar does not need list markers
Remove the browser's default setting to margins and padding set to 0
Examples of the above code is the standard horizontal and vertical navigation bar codes used.
Vertical navigation bar
The above code, we only need to style elements, build a vertical navigation bar:
Examples
a { display:block; width:60px; }
Illustration:
display: block - display the link block element, so that the whole becomes a clickable link area (not just text), it allows us to specify the width
width: 60px - block element default maximum width. We want to specify a width of 60 pixels
Tip: View a complete example of a vertical navigation bar styles.
Note: Be sure to specify the width of an element in the vertical navigation bar. If omitted, the width, IE6 may produce unexpected results.
Examples of vertical navigation bar
Create a simple vertical navigation bar instance, when the mouse is moved to the option, change the background color:
Home
news
contact
on
Examples
ul {list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: # f1f1f1;} li a {display: block; color: # 000; padding: 8px 16px; text-decoration : none;} / * mouse to move to the option to modify the background color * / li a: hover {background-color: # 555; color: white;}
Activate / current navigation bar instance
After clicking the option, we can add the "active" class standard which option is selected:
Home
news
contact
For examples
.active { background-color: #4CAF50; color: white; }
Create links and add borders
allowable
- or add the text-align: center style to make links to the center.
You can border
The added border attribute to make the navigation bar there is a border. If you want to add a border on each option, you can each - Add the element border-bottom:
Examples
ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }
Full-screen height fixed navigation bar
Next we create a full-screen on the left is the height of the fixed navigation bar on the right is scrollable content.
Examples
ul {list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: # f1f1f1; height: 100%; / * full-screen height * / position: fixed; overflow: auto; / * If the navigation bar and more options to allow scrolling * /}
Note: This example can be used on mobile devices.
Horizontal navigation bar
There are two ways to create a horizontal navigation bar. Using an inline (inline) or floating (float) list items.
Both of these methods are fine, but if you want to link to the same size, you must use the floating method.
Inline list items
One of establishing a lateral navigation method is specified elements, said code is a standard inline:
Examples
li { display:inline; }
Living Example:
display: inline; - By default,
- Element is a block element. Here, we remove line breaks before and after each list item to display a row.
Tip: View a complete example of the horizontal navigation bar styles.
Floating list items
In the above example links have different widths.
For all links of equal width, the floating
-
- Element, and designated as the width of the element:
Examples
li { float:left; } a { display:block; width:60px; }
Living Example:
float: left - slides using the slider elements adjacent to each other
display: block - display the link block element, so that the whole becomes a clickable link area (not just text), it allows us to specify the width
width: 60px - block element default maximum width. We want to specify a width of 60 pixels
Hint: see an example of the style completely horizontal navigation bar.
Horizontal navigation bar example
Create a horizontal navigation bar, change the background color of the mouse to move to the option later.
Examples
ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: # 333;} li {float: left;} li a {display: block; color: white; text- align: center; padding: 14px 16px; text-decoration: none;} / * mouse to move to the option to modify the background color * / li a: hover {background-color: # 111;}
Activate / current navigation bar instance
After clicking the option, we can add the "active" class standard which option is selected:
Examples
.active { background-color: #4CAF50; }
Link right-aligned
The option to set the right far right of the navigation bar alignment (float: right;):
Examples
Add the dividing line
- Add border-right dividing line style by:
Examples
/ * Except for the last option (last-child) are added other dividing line * / li {border-right: 1px solid #bbb;} li: last-child {border-right: none;}
Fixed navigation bar
Page navigation bar may be provided in the head, or fixed to the bottom:
Fixed head
ul {position: fixed; top: 0; width: 100%;} fixed to the bottom
ul { position: fixed; bottom: 0; width: 100%; }
Note: This example can be used on mobile devices.
Gray horizontal navigation bar
Fixed to the bottom
ul {border: 1px solid # e7e7e7; background-color: # f3f3f3;} li a {color: # 666;} (Editor: Leilin Peng Source: Network intrusion deleted)
- Element, and designated as the width of the element: