Creating a glowing navigation bar

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:

(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:

(The background of the whole bar of the navigation)
Navigation Current Tab Selected:

(The background of the current navigation tab that the person is on, this is explained later on in the tutorial)
Navigation Under glow effect:

(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

1 2 3 4 5 6 7 8 9

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

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

The Navigation bar CSS:

01 02 03 04 05 06 07 08 09 10 11

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:

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

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:

1 2 3 4 5 6

<div class="navigation">  <a href="#">Homea>  <a href="#" class="selected">Abouta>  <a href="#">Contacta>  <a href="#">Morea>  div>

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

1 2 3 4 5 6 7 8

<div class="navigation">  <a href="#">Homea>  <a href="#" class="current">Abouta>  <a href="#">Contacta>  <a href="#" class="current">Morea>  <a href="#">Newsa>  <a href="#" class="current">Linksa>  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:

1 2 3 4 5 6 7 8 9

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

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

1	<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

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

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 Bartitle>   <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 Onceh3>  <div class="navigation">  <a href="#" class="current">Link 1a>  <a href="#">Link 2a>  <a href="#">Link 3a>  <a href="#">Link 4a>  <a href="#">Link 5a>  <a href="#">Link 6a>  <a href="#">Link 7a>  div>  <img src="under-nav.png" class="underNav" alt="under" />    <h3>Using The Current Class Multiple Timesh3>  <div class="navigation">  <a href="#" class="current">Link 1a>  <a href="#">Link 2a>  <a href="#" class="current">Link 3a>  <a href="#">Link 4a>  <a href="#" class="current">Link 5a>  <a href="#">Link 6a>  <a href="#" class="current">Link 7a>  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!