<html5>
<head>
</head>
<style type="text/css">
/*
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.*/
</style>
<body>
<!--In the previous vertical nav bar example, I used a class to indicate the current page. For small
sites with the navigation embedded in the page, you can simply add the class on a page-by-page
basis. For large sites, there is a good chance that the navigation is being built dynamically, in
which case the class can be added on the back end. However, for medium-sized sites, where the
main navigation doesn’t change, it is common to include the navigation as an external file. In
these situations, wouldn't it be good if there were a way to highlight the page you are on, without
having to dynamically add a class to the menu? Well, with CSS there is.
This concept works by adding an ID or a class name to the body element of each page, denoting
which page or section the user is in. You then add a corresponding ID or class name to each item
in your navigation list. The unique combination of body ID and list ID/class can be used to
highlight your current section or page in the site nav.
Take the following HTML fragment as an example. The current page is the home page, as
indicated by an ID of home on the body. Each list item in the main navigation is given a class
name based on the name of the page the list item relates to.-->
<body id="home">
<ul class="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="clients.htm">Clients</a></li>
<li><a href="case-studies.htm">Case Studies</a></li>
</ul>
</body>
</html5>
