Designing and coding a sleek navigation with rollover effect

2006-11-04

In this tutorial I will teach you how to design the following sleek navigation:

We have to start by making a design of our navigation in photoshop. I have started by making a new canvas with width 461px and height 46px.

Blank canvas.

Next, add a rounded rectangle (shortcut 'U') with the radius option set to 5px. The rounded rectangle should only be half way onto the canvas as displayed below. The colour I used is #A9C9FF.

Rounded rectangle.

Next, duplicate the layer (shortcut ctrl+j) and move the new layers so all of the buttons are evenly spread.

Rounded rectangles.

Next, add the following styles to the buttons.

Button styles.

Your buttons should now look similar to these. Buttons with gradient and stroke.

Next, we'll add a slight white stroke on the inside of our blue stroke. Make a selection of your button by ctrl+clicking on the vector mask of the button layer. Then select>modify>contract>1px then start a new layer and fill it with white. Now select>modify>contract>1px then hit delete. Finally change the layer opacity to 80%.

Buttons with inner stroke.

Now we will add a slight shine, first make a new layer then make a selection covering the top half of the buttons then select your gradient tool. Change your setting so your gradient is white-transparent then make a gradient in the selection you made before. Now change the layer opacity to 20%.

Buttons with shine.

Now the last thing left to do is to create a rollover effect. Do do this, just change the colour of the background on one of your buttons. I changed one of them to #71A6FF.

Buttons with rollover.

Before we start coding, we need to save our button. We want the normal button and rollover button saved as one image so first make a selection of your normal button then ctrl+shift+c to copy merged. Start a new canvas but whatever height it has, double it so it will fit the rollover effect. Now paste (ctrl+v) your button and move it to the top of the canvas.

Button in new document.

Copy the rollover button then place it at the bottom of the canvas you just created.

Button in new document with rollover.

Save the new image as button_background.jpg and we are now done with photoshop. We now have to code the navigation.

Start two new files in notepad called index.html and styles.css. We will use the normal structure of a html document so add the following code to index.html:

Ad we're designing a navigation, we'll add the code for some links withing the body tags.

We're now done with index.html. It won't be working yet as we haven't done the CSS. Notice that I have class="Navigation" around all of the links and class="Button" on all links.

Now open styles.css and add the following code:

The more difficult code to understand is the 'Button' class, what it does is displays only the top half of the image we created before as a background. When we hover over it, it displays only the bottom half as a background.

I hope you had fun and learned something while reading through this tutorial.

Tutorials-db.com is an Privacy Policy and Legal

Link To Us! Site Map