This post was written a while ago (May 2009) and hence the information presented below may have less relevance compared to new practices since the original publish date. Please take this into consideration when reading the information below.

Creating a glowing navigation bar

6

Adding glow can make things look special or stand out and it can be applied to lots of different things. Glow can be used in website designs, to make something look just a little more special than the average look. In this case I’m going to use glow and apply it to a navigation bar to make look a little bit more ‘Wow’ than the average navigation bar, using nicely coloured gradients and bit of CSS magic, I’m going to show you how to achieve a real nice navigation effect, which looks smooth, sleek and with a few little extras to make it stand out.

First off all we’re going to need a couple of images for the effect which are below:

The Body Background:

bg

(The actual size of the image is 3 x 3, but because that is very small the image has been scaled so you can actually see it. You don’t actually need this image, but the navigation bar looks quite good with this background, so I thought I’d include it)

Navigation Background:

navigation bg

(The background of the whole bar of the navigation)

Navigation Current Tab Selected:

current bg

(The background of the current navigation tab that the person is on, this is explained later on in the tutorial)

Navigation Under glow effect:

under nav bg

(The glow effect which appears under the navigation bar)

Just download those images by right clicking and choose save image as. Hold onto them because we’re going to need them in a little while. For now though lets form the XHTML for our navigation bar:

The Navigation bar XHTML

<div class="navigation">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 <a href="#">Link 4</a>
 <a href="#">Link 5</a>
 <a href="#">Link 6</a>
 <a href="#">Link 7</a>
 </div>

This is the base code of the navigation, nothing complex. Lets quickly move onto the CSS part:

The Navigation bar CSS:


body { font-family:Tahoma; font-size:12px; background-image:url(bg.png); padding:5px 5px 5px 5px; }

.navigation { width:80%; padding-left:20%; background-image:url(navigation-bg.png); height:50px; }

.navigation a { text-align:center; width:100px; float:left; padding:17px; font-size:14px; font-weight:bold; color:#FFFFFF; border-right:1px solid #FEFEFE; }

.navigation a:hover { background:#07aee7; }

.underNav { width:100%; height:50px; }

.current { background-image:url(current-nav.png); border-left:1px solid #FEFEFE; }

Notice that are two random classes in the CSS, that aren’t in the HTML code above. But now oit’s time to add them in!

The current class is applied to a anchor tag like so:

 <a href="#" class="current">Link 1</a>

What does it do? When the class current is applied to whatever anchor tag it uses the current tab selected image, which slightly differs in colour to the navigation background. The whole idea of me putting in this was, say if you have a navigation bar with four links, Home, About, Contact and More and someone was on the About page and you wanted to make the navigation tab that they are on a different colour signifying they are on that page, applying the current class to the whichever anchor tag would create this effect. So you apply the current class to whichever tab is the About page link, something like this:

<div class="navigation">
 <a href="#">Home</a>
 <a href="#" class="selected">About</a>
 <a href="#">Contact</a>
 <a href="#">More</a>
 </div>

You could also use the effect to create a mix and match colour effect on various tabs like so:

<div class="navigation">
 <a href="#">Home</a>
 <a href="#" class="current">About</a>
 <a href="#">Contact</a>
 <a href="#" class="current">More</a>
 <a href="#">News</a>
 <a href="#" class="current">Links</a>
 </div>

It’s up to you how you use the current class, just a little extra effect to make things a little bit different.

The Under Navigation glow effect

The glow effect is simply a reversed gradient colour of the actual navigation background and has most of it’s background blurred away. The blur is important as it gives the fade effect, using a normal opaque eraser wouldn’t get the clean effect. To add it in, we simply take our HTML:

<div class="navigation">
 <a href="#" class="current">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 <a href="#">Link 4</a>
 <a href="#">Link 5</a>
 <a href="#">Link 6</a>
 <a href="#">Link 7</a>
 </div>

With the current class applied to a anchor tag and add in:

<img src="under-nav.png" class="underNav" alt="under" />

Notice in the CSS there is another called underNav. This is where it gets applied, the class simply defines the width and heigh of the under nav image. The width is set to 100% which is important, because the width setting will mean the under nav glow effect will scale to the size of the actual navigation bar. Any other width applied will mean the under nav and the actual navigation will not be the same length. The height also needs to be applied, so the glow effect fade is visible. So after all of that let’s put it all together:

The Finished Code

<!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>Glowing Navigation Bar</title>

<style type="text/css">

body { font-family:Tahoma; font-size:12px; background-image:url(bg.png); padding:5px 5px 5px 5px; }

.navigation { width:80%; padding-left:20%; background-image:url(navigation-bg.png); height:50px; }

.navigation a { text-align:center; width:100px; float:left; padding:17px; font-size:14px; font-weight:bold; color:#FFFFFF; border-right:1px solid #FEFEFE; }

.navigation a:hover { background:#07aee7; }

.underNav { width:100%; height:50px; }

.current { background-image:url(current-nav.png); border-left:1px solid #FEFEFE; }

</style>

</head>

<body>

<h3>Using The Current Class Once</h3>
 <div class="navigation">
 <a href="#" class="current">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 <a href="#">Link 4</a>
 <a href="#">Link 5</a>
 <a href="#">Link 6</a>
 <a href="#">Link 7</a>
 </div>
 <img src="under-nav.png" class="underNav" alt="under" />

 <h3>Using The Current Class Multiple Times</h3>
 <div class="navigation">
 <a href="#" class="current">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#" class="current">Link 3</a>
 <a href="#">Link 4</a>
 <a href="#" class="current">Link 5</a>
 <a href="#">Link 6</a>
 <a href="#" class="current">Link 7</a>
 </div>
 <img src="under-nav.png" class="underNav" alt="under" />
</body>
</html>

There we have it a nice glowing navigation bar, simple but with a nice result!

Click to view a preview of the navigation

Share This:

  • Javier

    Hi,

    Thank you very much. This information was really clear and useful.

    All the best

  • http://blog.jmwhite.co.uk James

    Thank you, Im glad it’s useful to you :)

  • http://twitter.com/9swords 9swords

    Very smooth looking nav menu, i especially like the glow beneath the bar. Thanks :)

    • http://blog.jmwhite.co.uk James

      Hey thanks alot there 9swords, glad you liked the tut!

  • Nick

    Hi, how could I make this navigation bar go vertically down a web page instead of horizontally?

  • Pingback: Creating a glowing navigation bar « Roshny’s Blog