Coding Navigation » Skylish

Coding Navigation

YOUR JOURNEY SO FAR: Home » Tutorials » Coding Navigation

Tutorial hardness:

Rate this tutorial:

In this short tutorial I will show you how to customize your navigation. When making a layout there are always those little things that you can do to make your layout stand out from the rest - I always try to be original when creating my navigation. Below I have given images of the different styles I've tried out:

All of these seem complicated, but they are actually extremely easy to do. The first thing you need is the basic navigation code which can be seen below:


a.nav  {

	width : ?px;

	height: ?px;

	color : #??????;

	background: transparent url(http://?) 0px 0px;

	display: block;

	font-size: 0px;

} 

a.nav span { 

	display: none; 

}

a.nav:hover  {

	width : ?px;

	color : #??????;

	background: transparent url(http://?) 0px -?px;

	display: block;

	font-size: 0px;

}

'nav' is the name of the link, you could as well have named it 'NavigationButton', 'Skylishcouk', or anything else, it makes no difference.
The 'height', is very important. When using this method your image contains both the original image and the image you wish to highlight [+], on 'a.nav:hover', where you see the -?px after the background image code, it's what gets your 'hovered' image to appear; the other image is still there, just above it (hence the minus).

Why do we do this? Why don't we just have two images? The benefit of doing it this way is that there is no delay between showing the hovered image because the full image has already loaded. When using two separate images, there is a delay where the hovered image is waiting to appear, the delay may only be three seconds long, but it's annoying.

Let me show you... I want to make this image, hover into this image. The first thing I do is combine the images by putting them directly one after the other - the un hovered image first. I usually do this via MS Paint:

I then insert it into the code, doing this is self explanatory. Remember the '-?px' in the last section is just the height of one image. Here is my new code:


a.nav  {

	width : 241px;

	height: 239px;

	color : transparent;

	background: transparent url(http://i523.photobucket.com/albums/w353/dkizzbaby/tutorials/navigationcode7.png) 0px 0px;

	display: block;

	font-size: 0px;

} 

a.nav span { 

	display: none; 

}

a.nav:hover  {

	width : 241px;

	color : transparent;

	background: transparent url(http://i523.photobucket.com/albums/w353/dkizzbaby/tutorials/navigationcode7.png) 0px -239px;

	display: block;

	font-size: 0px;

}

And below is my result:

Extra Details

On some of my layouts (most of them, actually), I have chosen to have my navigation outside my main container, people often ask me how I do this - the method is very simple. I firstly contain my navigation inside a div; I also edit the margin-left and margin-bottom codes, below is an example:


div.fake {

margin-left: -?px

margin-bottom: -?px

}

'Margin-left' is simply any number, the higher the number, the furthur it will move. Having a minus before it gets it to move towards the left, however without one it will instead move to the right.

'Margin-bottom' is simply the total height of the navigation. Say I had two navigation buttons each 100px in height with 10px margins on their bottoms, the margin bottom would be -220px. In this way, although their code is inside the container, it makes no difference to anything else inside the container.

How to display both codes on your website:


<a href="http://?" class="NAME">


<div class="NAME">

<a href="http://?" class="NAME">

</div>