Advanced Navigation

Today I’ll be teaching you guys on how to design and code advance css navigation. The navigation that I’m going to teach you is a glossy horizontal navigation.

If you haven’t read my basic css navigation tutorial, click on the link bellow to learn on how to make your own css navigation.

Basic CSS Navigation

VIEW DEMOAdvanced Navigation

Step 1
Open your photoshop and create new file. Set the width to width 500px and Height 30px. Press letter U in your keyboard to use shape tool but choose only the rounded tool and set the radius to 20px.

Step 2
Will now add new layer style for navigation. Go to blending option and choose gradient overlay. You can give any color you want for your glossy navigation so before you choose the right color make sure that the two colors will almost match.

Step 3
Hold press CTRL and click on the layer to select a perfect rounded side marquee tool on your layer and then hold press ALT to delete the top part of the marquee. Don’t deselect the marquee as of now make a new layer above the first layer and go to your gradient tool to choose your own color.

Click the image bellow to enlarge.

Step 4
And now let’s create one part of the navigation to make it a glossy navigation. Repeat the same as above by holding CTRL on the first layer, create new layer and put it above the second layer then delete the bottom part of the selected layer marquee.

Change the opacity of the layer 3 to 50% and set the layer property to screen.

Press CTRL+ALT+C to open canvas option and do the same option i did in the image bellow.

Duplicate your glossy navigation bar and do it same as the image bellow.

Step 5
Then let’s add some text as your navigation together with the hover effect. Make sure the text is aligned in the center.

What you see above there is only one hover effect so make more for the others and do the same bellow.

Step 6
Select one of the hover effect layers and go to blending tool then gradient overlay. The angle should be -90 degree and default gradient color, change the black to lighter one, change it to grey. And select overlay for the blending mode and opacity to 75%. To make your work faster for doing the same for the other hover effect layers, right click on the layer with the blending option settings and copy layer style then right click on the other hover effect layer and click on paste layer style.

Step 7
In this step will start coding in html. And what we are going to use is unordered list.

<ul id="navigation">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="blog"><a href="#">Blog</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>

Step 8
This next step is coding the basic in CSS code for the navigation. So read carefully especially the comment part.

ul#navigation{
	margin:0;
	padding:0;
}
ul#navigation li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
ul#navigation li a{
	margin:0;
	padding:0;
	width:100px; /*All link width are set to 100 pixels*/
	height:30px; /*All link height are set to 30 pixels*/
	text-indent:-2000px; /*Move your text link to 2000 pixels to the left*/
	float:left;
	outline:none;
}

Step 9
Let’s start inserting the image into your unordered list. If you notice the coordinates of 0 0 to -400 0; it is use to position your image navigation to display properly. The first digit is for the left position and the second digit is top position. I used negative coz if the position is set to 0 0, means the image is starting from the left part of the image navigation. So by displaying the second menu properly, you need to give it a negative coordinates for the left position. Then do it the same as the other menu but don’t forget using basic math for the positioning of your menu. Coz all width is set to 100 pixels.

ul#navigation li.home a{
	background:url(09.jpg) no-repeat 0 0;
}
ul#navigation li.about a{
	background:url(09.jpg) no-repeat -100px 0;
}
ul#navigation li.photos a{
	background:url(09.jpg) no-repeat -200px 0;
}
ul#navigation li.blog a{
	background:url(09.jpg) no-repeat -300px 0;
}
ul#navigation li.contact a{
	background:url(09.jpg) no-repeat -400px 0;
}

Step 10
For the final step, let’s start the hover effect of the image navigation guys. Just copy the code above and paste it in a new line then change the second digit to -30px and then it’s all done. You advanced navigation is ready to go.

ul#navigation li.home a:hover{
	background:url(09.jpg) no-repeat 0 -30px;
}
ul#navigation li.about a:hover{
	background:url(09.jpg) no-repeat -100px -30px;
}
ul#navigation li.photos a:hover{
	background:url(09.jpg) no-repeat -200px -30px;
}
ul#navigation li.blog a:hover{
	background:url(09.jpg) no-repeat -300px -30px;
}
ul#navigation li.contact a:hover{
	background:url(09.jpg) no-repeat -400px -30px;
}