/*
Creating a graphical nav bar
*/
/*
You then zero down the padding and margins, as well as remove the default bullets. For this
example, I want my horizontal nav bar to be 72 ems wide and to have a repeating orange
gradient as a background.*/
ul. nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
/*
The list is currently displayed vertically. To make it display horizontally, float your list items to the
left.
*/
ul. nav li {
float: left;
}
/*
Remember that when an element is floated, it no longer takes up any space in the flow of the
document. As such, the parent list effectively has no content and collapses down, hiding the list
background. As you learned in Chapter 3, there are several ways to make parent elements
contain floated children. One method is to add a clearing element. Unfortunately, this adds
unnecessary markup to the page so should be avoided if possible. Another other method is to
float the parent element as well and clear it further down the line, say, using the site footer. The
third method it to use the overflow:hidden technique, which is the method I normally use:
*/
ul.nav {
margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
/*
As with the page navigation example, each of the links in this horizontal nav bar is made to
behave like a button by setting its display property to block. If you wanted each button to be a
fixed size, you could explicitly set its height and width. However, this can cause maintainability
issues. Instead I’m going to let the width of each button be based on the size of the anchor text.
To do this, rather than setting an explicit width, I have applied 3 ems of padding to the left and
right sides of each anchor link. As in the previous example, the link text is being vertically
centered using line height. After that, the link underlines are turned off, and the link color is
changed to white:
*/
ul.nav a {
display: block;
padding: 0 3em;
line-height: 2.1em;
text-decoration: none;
color: #fff;
}
/*
I want to create dividers between each link in the nav bar. You could do this by setting horizontal
borders on the list item or anchors. However, for simplicity’s sake, I’m going to apply a
background image to the anchor links instead.
*/
ul.nav a {
display: block;
padding: 0 2em;
line-height: 2.1em;
background: url(img/divider.gif) repeat-y left top;
text-decoration: none;
color: #fff;
}
/*
However, the first link in the nav bar will have an unwanted divider. Adding a class to the first list item and setting the background image to none can remove this:
*/
ul. nav .first a {
background-image: none;
}
/*
Alternatively, if you’re not too worried about supporting IE 6, you could forego the additional class
and use the :first-child pseudo class instead.
*/
ul.nav li:first-child a {
background: none;
}
/*
Last, the rollover state in this example is simply a change in link color:
*/
ul.nav a:hover,
ul.nav a:focus {
color: #333;
}
/*And there you have it: a well-styled horizontal nav bar with good, cross-browser support.*/
- Home
- About
- News
- Products
- Services
- Clients
- Case Studies
扫一扫
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
