Creating a glassy non div navigation bar

86

I’ve been doing a big of changes to the header of James’ Blog and one of the main changes is the navigation, I’ve used a glassy effect to make them stand out but I’ve also noticed I’ve posted quite a few tutorials on creating a navigation bar, but in each of them I’ve used divs. But it’s time for change! In this tutorial however, no divs will be used, instead you will be forming a navigation bar using a unordered list. This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

A bit of theory before we begin. Because this tutorial will show you how to create a navigation bar with lists, its important that you know how to use lists properly and in it’s correct state, but first a little history. A couple of years ago many website developers we’re using lists to form there content, so everything such as the header, footer etc was in a list. This was of course wrong, but at the time some XHTML Doctype’s did not recongise this as invalid, and infact the abuse continued as it was not being idenfied as invalid, here’s a classic example of what abuse went on:

<body>
<ul>
<li id="header"><h2>This is my website title</h2></li>
<ul id="nav">
<li>Link 1<li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<li id="content">This would of been someones website content, which was being put in a list.</li>
<li id="footer">Website footer</li>
</ul>
</body>

A list would be the first bit of code after the body tag, and it would be a nightware to view the source of that page and be greeted with this horrible code! To create that websites structure properly you would need to use divs and it would be formed something like this:

<body>
<div id="header">
<h2>This is my website title</h2>
</div>
<div id="navigation">
<ul class="links">
<li>Link 1<li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="content">This would of been someones website content, which was being put in a list.</div>
<div id="footer">Website footer</div>
</ul>
</body>

Notice how a bit of the list code is still left in, thats because to some extent you can use lists to help form things, but using it to form a entire website? Not good. But for this tutorial you will be shown how you can use lists to form a navigation bar with appropiate styling

Step 1: Prepare your workspace

All you will basically need is some sort of code editor e.g. Notepad, Dreamweaver etc.

Step 2: Forming the XHTML Document

By now my readers should be XHTML compliant, so go ahead and open up a blank document and create the basic XHTML Structure. If you need a refresher course here it is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Now between the body tags place this code:

<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>

Thats it on XHTML side of things, the styling is where the magic happens

Step 3: Styling the lists

I’ve wrote a similar styling tutorial before, I basically explained and showed a few HTML tags that can be defined in CSS in this tutorial this will be put into practice, so if you missed the tutorial head over to:

http://blog.jmwhite.co.uk/2008/08/29/common-xhtml-tags-defined-in-css/

(The list tag was not shown in the tutorial but now the theory behind that tutorial will come into play here)

For this navigation to work you will have to style three attributes present in the XHTML code they are the Unordered list (ul) List Item (li) and of course the anchor tag (a)

Styling the unordered list:

ul#menu {
clear: both;
float: left;
list-style: none;
margin: 0px 10px 0 0px;
border-bottom:1px solid #333333; /*Remove to create tab effect*/
width:500px; /*If tab effect is not being used, this will define how long the bottom border will be*/
}

The unordered list is the first tag called in XHTML the stying applied to this tag is essentially the foundation of how the navigation tabs will display, it’s important that it’s coded correctly otherwise the foundation of the navigation base is already going to cause errors.

Now we can style the list items:

ul#menu li {
display: inline;
list-style: none;
}

The list items are what the hyperlinks are nested within the XHTML, for more control and cleaner/sematic coding, you’ll notice many websites use lists to control navigation links.

Finally we need to style the hyperlinks themselves:

ul#menu li a {
margin-right:5px;
color: #FFFFFF;
display: block;
float:left;
font: 14px/100% Arial, Helvetica, sans-serif;
line-height: 32px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-image:url(nav-tab-bg.png);
background-color:#000000; /*A basic background color is set incase the image will not load*/
border:1px solid #333333;
border-bottom:none;
}

You can probably tell from the difference in attributes set that anchor tag is mainly we’re most of that “pretty styling” occurs, which allows you to make your navigation links stand out. Now like many of my navigation tutorials there is a background image set, and it would be plain rude to not to include it in the tutorial, so here it is:

nav-tab-bg

(Right click and save this to your computer)

Step 4: Putting it all together

Now that all the styling is complete we can now incorporate it into the XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Glassy Navigation Tabs</title>
<style type="text/css">

ul#menu {
clear: both;
float: left;
list-style: none;
margin: 0px 10px 0 0px;
border-bottom:1px solid #333333; /*Remove to create tab effect*/
width:500px; /*If tab effect is not being used, this will define how long the bottom border will be*/
}

ul#menu li {
display: inline;
list-style: none;
}

ul#menu li a {
margin-right:5px;
color: #FFFFFF;
display: block;
float:left;
font: 14px/100% Arial, Helvetica, sans-serif;
line-height: 32px;
text-decoration: none;
vertical-align: middle;
padding: 0 10px;
background-image:url(nav-tab-bg.png);
background-color:#000000; /*A basic background color is set incase the image will not load*/
border:1px solid #333333;
border-bottom:none;
}


</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>

And thats all there is to it, a non div navigation bar with a nice glassy effect to it

Live Preview:
Click here to view the navigation bar

Share This: