Tutorial: Coding the Apple’s Navigation Bar (Part 2 of 2)
In part one of this tutorial, I showed you how to create the navigation bar from Apple’s website in Photoshop. In this tutorial, I will show you how to code the navigation bar in CSS. It is really easy so sit back, read over this tutorial, then open up your editing tool and get started (I used dream weaver).
Step One
In part one you were left off by putting the hover part under the normal stage and saving it as one file. Here is the image for reference.
Click image to view full size. You may right click it and save it if you wish. If you followed the first tutorial, just open you image. You want to measure each link. Below is an image to clarify what I mean.
Once you write those numbers down, we can begin.
Step Two
The CSS
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#applenav {
background: url(appnav.png);
height: 35px;
width: 978px;
margin: 0px auto;
position: relative;
top: 30px;
}
#applenav li {
list-style-type: none;
float: left;
}
#applenav a {
height: 35px;
display: block;
}
#one { width: 110px; }
#two { width: 110px; }
#three { width: 106px; }
#four { width: 134px; }
#five { width: 103px; }
#six { width: 127px; }
#seven { width: 110px; }
#one a:hover {
background: url(appnav.png) 0px -35px no-repeat;
}
#two a:hover {
background: url(appnav.png) -111px -35px no-repeat;
}
#three a:hover {
background: url(appnav.png) -220px -35px no-repeat;
}
#four a:hover {
background: url(appnav.png) -327px -35px no-repeat;
}
#five a:hover {
background: url(appnav.png) -460px -35px no-repeat;
}
#six a:hover {
background: url(appnav.png) -563px -35px no-repeat;
}#seven a:hover {
background: url(appnav.png) -690px -35px no-repeat;
}#search {
width:172px;
margin-left:5px;
}
</style>
Let’s explain the CSS as best we can.
We have a total of eight spaces, however, only 7 will be links and the last one will be the search field. Each state is the width of each link then we have the hover state which is taking the bottom of the image (-35px – rememebr, this image is 70px high in total) and creating the hover effect. The larger numbers in the hover effect, are the numbers that start from the left hand side of our image and go outward. This will create the hover effect because it all lines up from the top to the bottom of our image.
Step Three
The HTML
<body>
<ul id="applenav" style=" vertical-align:top">
<li id="one"><a href="#"></a></li>
<li id="two"><a href="#"></a></li>
<li id="three"><a href="#"></a></li>
<li id="four"><a href="#"></a></li>
<li id="five"><a href="#"></a></li>
<li id="six"><a href="#"></a></li>
<li id="seven"><a href="#"></a></li>
<li id="search">search form here</li>
</ul>
</body>
Let’s explain the HTML as best we can.
The HTML consists of only the ul and li commands. Since this is pure CSS, all we need to do is create the simple commands to call the CSS to our image.
There you have it. Feel free to leave a comment with any question’s or trouble’s you come across.
HELP SPREAD THE WORD!
Posted in CSS Tutorials, Photoshop Tutorials, Tutorials / How To's
No Comments »
Related Posts
(1 votes, average: 5.00 out of 5)
Loading ...
Dunkin is keeping me running.... :).
Please leave your comment!