HV-Designs.co.uk

October 29th, 2009 in Coding Tutorials by Richard Carpenter

Windows 7 Navigation Code

• Share

hello, welcome, in this tutorial il be showing / explaining how to transform the windows 7 inspired navigation into a fully working CSS navigation.

Lets Get Started!

Before we start diving into the HTML and CSS we need to make a few adjustments to the PSD file and create a background to demonstrate the PNG transparancy. We’ll start with the background first.

Create a new document 800 x 600 pixels, set your foreground color to #1592d7 and background color to #136da2. Select the gradient tool with a radial gradient.

Once you’ve selected the gradient tool start from the middle of the canvas and drag downwards about half-way. Create a new layer above your background layer then select the custom shape tool from the menu on the left.

Once you’ve selected the tool, at the top you’ll see the word shape, click the little arrow to open the shapes panel. Find the “registration target” shape.

If you dont see then registration target shape click the little black arrow in the top right hand corner, you and load more preset shapes there. Once you’ve selected the shape drag it out over your canvas, make the shape as big as you can. Place the shape so that the streaks are flowing nicely over the canvas.

Fill the shape with the color white then add a guassian blur of 5pixels. Finish off by setting the layer opacity to 30% and blending mode to overlay.

We now need to blend in our streaks with the background, add a layer mask to the streaks layer, select the gradient tool with a linear gradient. Drag the linear gradient from the left of the canvas towards the right, BUT dont go all the way across the canvas, you just want to fade in the edges. Repeat the process for the right side also, you should have something like this.

Create a new folder for your navigation, inside this folder create another folder called images. Save the background as “background.png” inside the images folder.

Modifying The PSD File

Open up your windows 7 navigation PSD file, select the zoom tool and zoom into the top and bottom lines.

Select the eye dropper tool and pick the colors of the white and black line.

Re-create the top and bottom lines using the colors from the eye dropper. The reason were doing this is because the lines were orginally white and black with the opacity lowered. When we save the images for the navigation the lines wont retain there opacity, they’l simply change back to black and white.

Slicing The Navigation Background

Select the rectangular marquee tool and make a 1 pixel wide selection around the navigation background. Hide the background layer and the white streaks layer.

Once you’ve made the selection go to “edit > copy merged”. Create a new document, the dimensions of the selection should automatically be inputted into the dimension fields. Paste the selection into the new document then delete the background layer, save the image as “navigation_background.png” inside the images folder.

Slicing The Navigation Button

Still with the rectangular marquee tool this time make a selection around one of the buttons.

Once you’ve made the selection hide the background and background streaks then go to “edit > copy merged”, copy and paste the selection to a new document and save as “nav_button.png” on a transparent background inside the images folder.

Creating The Hover Button

Duplicate the button shine layer then change the gradient overlay to the following settings.

Hide the orginal button shine layer, then select the rectangular marquee. With the rectangular marquee tool make a selection around the new button.

Hide your background layer and the white streaks layer then go to “edit > copy merged”, paste the selection to a new document with a transparent background. Save the image as “nav_hover.png” inside the images folder.

Were now ready to start coding.

Setting Up Our Files

You should already have a folder in which we created earlier, inside the folder create a blank CSS and HTML file. You should have 2 files and 1 folder, index.html, styles.css and a folder called images.

Open up your HTML and CSS file in your code editor. The first thing we’l do is add our 800×600 pixel background so that we can see that the PNG files are still transparent.

In your CSS file add the following code.

body {
	background-color: #1570a4;
	background-image: url(../images/background.png);
	background-repeat: no-repeat;
	background-position: center top;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 10px;
}

Marking Up The Containers

Before we start with all the navigation stuff lets first create a couple of containers so that our navigation centers across our streaky background. Create a new DIV called container, inside the container DIV create another DIV called navigation1.

The menu im going to show you how to code will be a fixed width menu spanning 800 pixels. There are four menus in total but im only showing you this one, il provide all menus for you to download though.

<div id="container">

<div id="navigation1">
</div><!--NAVIGATION 1 ENDS-->

In your CSS file add the following CSS rules.

#container {
	width: 800px;
	margin: auto;
}

#navigation1 {
	height: 50px;
	float: left;
	width: 800px;
}

The container styles are pretty simple, were just setting a fixed width of 800 pixels and setting the margins to auto, settiing the margins to auto will center the container in a browser. The navigation 1 DIV is pretty much the same only this time its floated left and has a fixed hieght. The fixed height is the height of our navigation image.

Marking Up The Navigation

Now mark-up a simple navigation using an unordered list inside the DIV navigation1. The code should look something like this.

<div id="navigation1">
<ul class="nav1">
<li><a href="#" title="#">Button1</a></li>
<li><a href="#" title="#">Button2</a></li>
<li><a href="#" title="#">Button3</a></li>
<li><a href="#" title="#">Button4</a></li>
<li><a href="#" title="#">Button5</a></li>
<li><a href="#" title="#">Button6</a></li>
<li><a href="#" title="#">Button7</a></li>
<li><a href="#" title="#">Button8</a></li>
</ul>
</div><!--NAVIGATION 1 ENDS-->

We start off with an un-order list which has a class of “nav1″, we then have our list items with our links.

Adding The CSS Code

.nav1 li {
	display: block;
	background-image: url(../images/nav_button.png);
	background-repeat: no-repeat;
	float: left;
}

.nav1 li a {
	display: block;
	float: left;
	height: 50px;
	width: 91px;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 48px;
}

.nav1 li a:hover {
	color: #FFFFFF;
	background-image: url(../images/nav_button_hover.png);
	background-repeat: no-repeat;
}

CSS Code Explained

We start off by styling our individual list items (li), each link will be displayed as a block element which is floated left. We then add our navigatiob button PNG as a background then set the background-repeat property to no repeat.

Next we have our list links (li a), the links are also displayed as a block element and floated left. Any text inside the list will be centered, will have a font size of 12px in the color white (#ffffff) and finally have a line height of 48px. The line height pushes the text into the center of the button vertically. Each link item will also have a fixed width and height, the width and height should be the same as your nav-button image.

Finally we style our hover state of our navigation (li a:hover), we simply add a navigation hover button as background which isn’t repeated. You can also change the color of the text if you wish or keep it set to white (#ffffff).

The DEMO

Heres the demo for you all to look at, ive provided 4 navigations some with text and some with icons, the menus also range from fixed width menus or ones with 100% width background. The navigations should all be transparent without using any additional CSS code, try using a busy background to really notice the difference.

Thanks

Thats it for this tutorial, hope you found it worth reading. Dont forget to DIGG and RE-Tweet, your help is much appreciated.