CONVERTING A WEB PAGE INTO CSS

free CSS tab menu scripts

In the previous css examples, we 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 have a free css tab menu script to highlight the page you are on, without having to dynamically add a class to the menu?

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 this 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 id="mainNav">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="news"><a href="#">News</a></li>
<li class="products"><a href="#">Products</a></li>
<li class="services"><a href="#">Services</a></li>
</ul>
</body>

To highlight the current page you simply target the following combination of IDs and class names:

#home #mainNav .home a,
#about #mainNav .about a ,
#news #mainNav .news a,
#products #mainNav .products a,
#services #mainNav .services a {
background-position: right bottom; color: #fff;
cursor: default;
}

When the user is on the home page, the nav item with a class of home will display the selected state, whereas on the news page, the nav item with the class of news will show the selected state. For added effect, I have changed to cursor style to show the default arrow cursor. That way, if you mouse over the selected link, your cursor will not change state and you won’t be tempted to click a link to a page you are already on.

Creating a horizontal nav bar when converting your web page into css styles.

As well as using lists to create vertical nav bars, they can also be used to create horizontal ones. In this example, I am going to demonstrate how to create a horizontal navigation bar like.

As in the previous example, you start with a simple, unordered list:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>

<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>

You then zero down the padding and margins, as well as remove the default bullets. For this example we want my horizontal nav bar to be 720 pixels wide, and to have a repeating orange gradient as a background:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

The list is currently displayed vertically. To make it display horizontally, you can use one of two methods. You can either set the list items to display inline, or you can float them all
left. Displaying the list items as inline is probably the simpler method. However, from personal experience I have found that it can produce buggy results; therefore, I tend to favor the floating method:

ul 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 2, there are two 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.

The other method is to float the parent element as well, and clear it further down the line, say, using the site footer. This is the method I normally use:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left;
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

As in the vertical navigation bar example, the links in the horizontal nav bar are made to behave like buttons and to serve as css header example by setting their display property to block. If you wanted each button to be a fixed size, you could explicitly set its height and width. In this example, I want the width of each button to be based on the size of the anchor text. To do this, rather than setting a width, we have applied 2ems 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. Lastly, the link underlines are turned off and the link color is changed to white:

ul a {
display: block;
padding: 0 2em;
line-height: 2.1em;
text-decoration: none;
color: #fff;
}

I want to create dividers between each link in the nav bar. This can be done by applying a divider graphic as a background image to the left of each anchor link:

ul a {
display: block;
padding: 0 2em;
line-height: 2.1em;
background: url(images/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 .first a {
background: none;
}

And there you have it: a well-styled horizontal nav bar with good, cross-browser support that highlights the way you have converted your website into css.