Tuesday, October 25, 2011

Creating a glowing navigation bar


CSS
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

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">
<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!

No comments:

Post a Comment