RSS
Lastfm
Delicious
Vimeo
loading comments

Creating a glassy non div navigation bar

Posted on: January 7, 2009 Categories: CSS, Menus/Navigation, Tutorials
CSS

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://www.james-blogs.com/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

I'm James, I'm 18 years old and I'm a freelance website developer from Nottingham, England. I have a passion for website development and have designed websites for a range of clients in my freelance years. James' Blog is my personal blog where I post articles and general posts whenever I can. I typically like talking website development, but you'll find a range of posts and articles here on my blog.

  • Abraham

    Cool tut, i was only able to skim through content… I’ll try it later in my leisure; only have a chance to take a quick glimpse :) While i was skimming – your bottom link seems to be broken “Click here to view the navigation bar”

    Keep up the good work, postin from Los Angeles, CA :P

  • http://www.james-blogs.com James

    Thanks Abraham,

    Yes the link was broken, I aplogise for that, all fixed now. Enjoy :)

  • http://fire-studios.com/blog Fire G

    You really Buggered up JB didn’t you James xD.

    anyways, nicely explained tutorial. It’s a really simple effect but you had some nice wording on this old subject XD (jk jk).

  • maverick447

    nice article on the links , however how do i ensure that once the user selects a new hyperlink my navigation bar stays and the content ( new hyperlink) is loaded in beneath !

  • Naveed

    Thanks man that was great stuff

  • http://speckyboy.com/2009/06/08/24-css-in-some-cases-with-jquery-navigation-and-menu-tutorials/ 24 CSS (in some cases with jQuery) Navigation and Menu Tutorials : Speckyboy Design Magazine

    [...] Creating a glassy non div navigation bar [...]

  • http://infoeduindia.com/2009/06/10/creating-a-glassy-non-div-navigation-bar/ Creating a glassy non div navigation bar – Tutorial Collection

    [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Wednesday, June 10th, 2009 at 6:26 am and is filed under Css Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  • http://maverickwebmaster.com/2009-06-13/28-free-topnotch-css-based-navigation-menu-tutorials/ 28 Free Top Notch CSS Based Navigation Menu Tutorials

    [...] Creating a glassy non div navigation bar [...]

  • http://glurt.com/css-horizontal-drop-down-menu-tutorials CSS horizontal drop down menu tutorials | glurt

    [...] Creating a glassy non div navigation bar [...]

  • http://www.designdazzling.com/2009/08/75-amazing-css-navigations-and-jquery-examples/ 75 Amazing CSS Navigations and Jquery Examples | Design Dazzling

    [...] Creating a glassy non div navigation bar [...]

  • http://www.bizimblog.com/?p=127 25+ Tane CSS Button Dersi ve Kodlama Teknikleri | BizimBlog

    [...] Creating a glassy non div navigation bar [...]

  • http://abdie.web.id/07072010/complete-toolbox-55-css-menu-and-button-coding-tutorials/ Complete Toolbox: 55 CSS Menu And Button Coding Tutorials » abdie.web.id

    [...] 24. Creating a Glassy Non Div Navigation Bar [...]

  • http://www.cgstream.co.cc/complete-toolbox-55-css-menu-and-button-coding-tutorials/ Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | CG Stream

    [...] 24. Creating a Glassy Non Div Navigation Bar [...]

  • http://www.1stwebdesigner.com/tutorials/css-menu-button-tutorials/ Complete Toolbox: 55 CSS Menu And Button Coding Tutorials

    [...] 24. Creating a Glassy Non Div Navigation Bar [...]

  • http://www.techfleck.com/2010/07/08/complete-toolbox-55-css-menu-and-button-coding-tutorials/ Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | TechFleck

    [...] 24. Creating a Glassy Non Div Navigation Bar [...]

  • http://ztaom.wordpress.com/2010/07/08/55-css-menu-and-button-coding-tutorials/ 55 CSS Menu And Button Coding Tutorials « FED视野

    [...] 24. Creating a Glassy Non Div Navigation Bar [...]

  • http://www.afiffattouh.com/web-design/complete-toolbox-55-css-menu-and-button-coding-tutorials Complete Toolbox: 55 CSS Menu And Button Coding Tutorials | Afif Fattouh – Web Specialist

    [...] 24. Creating a Glassy Non Div Navigation Bar [...]

blog comments powered by Disqus