Web Design: PSD to CSS, Part 3
by Joey at 1:00 pmDeveloping a menu
In this case, we’re going to develop a CSS-driven navigation menu. First, we must decide what links we will have for other pages in our Web site.
For RockRadio Records, we have decided on the following:
Home | Artists | Releases | Tour | Links | Store | About | Contact
Now, using Photoshop, develop the background for your navigation bar. We’re developing a horizontal bar, so in this case, I want a black background with a small gray portion at the top.
Starting out with a canvas size of 1 pixel wide by 36 pixels tall, create the background that will be set to repeat across the page. In order for this to happen, you will need a specific code, which we will discuss soon.
Once the images for the navigation bar are completed, the coding can begin. First, we’ll develop a CSS document for the navigation bar. We’ll create it as an unordered list (UL). To begin the CSS, the code is as follows:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:766;
position:relative;
display:block;
height:36px;
font-size:12px;
font-weight:bold;
text-transform:lowercase;
background:transparent url("images/bg.jpg") repeat-x top left;
font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
pading:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
}
ul#menu li a:hover
{
color:#FFFFFF;
background:transparent url("images/over.jpg") no-repeat top right;
}
Be sure to put the images you create in photoshop into your images folder so that the navigation works properly. Let’s discuss the states of the buttons. The good thing about using this kind of navigation is being able to make quick changes just within your HTML code if you choose to add or lose a button, or if you need to change the name of it. If you create the button as GIF files or JPGs, then it is harder to go back and change the text or look of them in Photoshop or your favorite image editing program.
In the CSS stylesheet, the last portion of it is the “hover” state, which is what the button will look like once the cursor is moved over.
These fields within the CSS can be changed to your liking in order to develop a certain look. Now within the specific div in your HTML code, you can begin to set it up, as in the photo to the right.
With the code in place, this is what the final product should look like.
