HV-Designs.co.uk

March 23rd, 2010 in Coding Tutorials by Richard Carpenter

Carbon Fibre Style Inset Navigation: The Code

• Share

Hello welcome to another tutorial by HV-Designs. In this tutorial il be showing you how to code the “Carbon Fibre Style Inset Menu” into a working CSS/HTML Document.

Follow Part 1

If you havent already created this navigation in photoshop you can do so by following PART 1 of the tutorial here.

View The Coded Version

You can view the full coded version here.

Setting Up Your Files

Before we even start slicing and dicing we first need to setup a few files. In a folder on your desktop you need a blank HTML file “index.HTML”, a blank CSS file “styles.CSS” inside another folder called “stylesheets”. Finally you need an empty folder for our images called “images”.

The Markup

Open up your HTML file in your favorite code editor then within the “BODY” tag create a DIV ID of “container”. The container DIV will be our main container in which all our elements will be held.

<div id="container">
</div><!--CONTAINER ENDS-->

Inside the the “container DIV” create another DIV of “NAV”. The nav DIV will be the container for our navigation, the code looks like this.

<div id="container">

<div id="nav">
</div><!--NAV-->

</div><!--CONTAINER ENDS-->

Inside the “nav” DIV mock up a simple list. Start off with an unordered list (UL) with a class of “navigation”, inside the unordered list create your list (LI) elements. Each list (LI) element should be given its own class so that we can style each list (LI) object.

The markup looks like this.

<div id="container">

<div id="nav">

<ul class="navigation">
<li class="home"><a href="#" title="Home">Home</a></li>
<li class="services"><a href="#" title="Services">Services</a></li>
<li class="portfolio"><a href="#" title="Portfolio">Portfolio</a></li>
<li class="works"><a href="#" title="Works">Works</a></li>
<li class="contact"><a href="#" title="Contact">Contact</a></li>
</ul>

</div><!--NAV-->
</div><!--CONTAINER ENDS-->

That’s our markup pretty much finished, lets begin to slice our navigation.

Preparing Our Navigation Images

Believe it or not but the navigation is only made up of one image. We’ll use one big image of both the normal and hover state of the navigation then use CSS to change the background position, this technique is also known as “CSS Sprites“.

The cool thing about using CSS sprites is that the image is only loaded once and once its loaded your hovers will work perfectly without an mishaps. My image size is only a total of 80KB which is nothing by today’s standards. The image looks like this.

Lets get started.

Open up your navigation PSD file in photoshop, select the rectangular marquee tool then make a selection around the whole navigation making sure everything is included in the selection.

Once you’ve made the selection go to “image > crop”. After cropping the image you will notice how small the canvas area has now become, we need to increase the canvas height so that we can fit the same navigation on underneath the first one.

Find out how big your current canvas size is then times the height by 2. My canvas area is 179 pixels in height so if i multiply mine by 2, my new canvas size becomes 358 pixels. To increase the canvas area go to “image > canvas size”.

You should now have something like this.

Duplicating The Navigation

Before we duplicate the whole navigation remove the hover state effect from which ever button you applied it too (if any).

Select all layers to do with your navigation then duplicate them, keep them highlighted then move the whole navigation down directly underneath its original, be sure not to leave a gap between the two. You should have something like this.

The top navigation will be how it will look once loaded in the browser, the bottom navigation is what it will look like when you hover over it.

On the bottom navigation you need to add your hover state to every button. Be sure not to move any of the text or the orb, as the slightest movement will be picked up in the browser.

Heres my complete navigation with the hover states added.

Now before we save our navigation we need to remove the background layer so the two navigation’s are on a transparent background. Once you’ve removed the background save the image as “navigation.GIF” inside the images folder.

You will also need the brushed metal background in which we used for our navigation, just save it as “bg.PNG” inside the images folder.

Bringing It All Together

Open your “styles.CSS” file in your code editor so we can begin to add our CSS styles. The first set of styles are for our document background and container, the code looks like this.

body {
background-color: #c3c3c3;
background-image: url(../images/bg.gif);
background-repeat: repeat;
background-position: center top;
}

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

For the body we simply add our background image and repeat it, setting the background position to center top will ensure our background repeats from the top center of our browser.

For our container we set our margins to auto, this will center our contain within our browser. We then set a fixed width of 793 pixels, the fixed width should be the same width as our navigation image.

The next set of styles are for our navigation container, navigation un-ordered list and list items.

#nav {
float: left;
width: 793px;
height: 179px;
}

.navigation li {
display: block;
float: left;
}

.navigation li a {
display: block;
float: left;
height: 179px;
text-indent: -9999px;
}

The main styles you need to be aware of are the fixed width and heights and the text indent. The fixed width’s should be the same width as the navigation image, the fixed heights should also be the same height as the navigation image.

The text indent hides the text labels by shifting them off the screen. The next set of styles are for navigation list (LI) items, if you can remember each list (LI) item had its own class assigned to it.

li.home a {
width: 160px;
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: left top;
}

li.services a {
width: 158px;
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -160px top;
}

li.portfolio a {
width: 158px;
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -318px top;
}

li.works a {
width: 158px;
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -476px top;
}

li.contact a {
width: 159px;
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -635px top;
}

The styles on each list (LI) class are pretty simple, we basically add our navigation image as a background but change the background position of each list (LI) item. We also set a fixed width which reflects the width of each button. You can determine the width of each button by measuring the width in photoshop.

The last and final set of styles we need to add are for our list (LI) hovers, the code is pretty much the same as the last set of styles we just need to adjust the background position so that the bottom navigation shows up.

li.home a:hover {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: left bottom;
}

li.services a:hover {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -160px bottom;
}

li.portfolio a:hover {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -318px bottom;
}

li.works a:hover {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -476px bottom;
}

li.contact a:hover {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
background-position: -635px bottom;
}

That’s it all done, you can test the navigation by clicking the button at the bottom, also look out for the FREE downloaded version soon.

Thanks for reading.

• Share