Graphical Menus

You can use images as links. Here's an example:

How does this work? First, we need to create an unordered list, like so... but with a few extras, like a menu class and an id selector called "nav_home", "nav_author", "nav_blog", and "nav_contact".

<div class="menu">
<ul>
<li id="nav_home"><a href="#">Home</a></li>
<li id="nav_author"><a href="#">Author</a></li>
<li id="nav_blog"><a href="#">Blog</a></li>
<li id="nav_contact"><a href="#">Contact</a></li>
</ul
</ul>
</div>

Is that it? No, we have to go into Photoshop (or another image editing program, and create an image that is "stacked. The image I want is 40px tall, so each of the home buttons should be 40px. But since I am combining them, my total image size (with both stacked buttons) should be 80px. Do this for every navigation item.

home

We also need to create a background that is 1 x 40, the height of 1 of my buttons. This image will serve as the base or gradient color that will run across the bar.

image color

We have done all we can for the images. Now it is time to start coding.

The first thing we need to do is add code to the CSS. We first have to add two new properties: the menu class, and something on the UL to remove those bullets!

.menu {
width: 500px;
background:transparent url(../images/imageNav.jpg) repeat-x scroll 0 0;
height:40px;
}
.menu ul {
list-style-type: none;
}

Next, we need to add something new- IDs for the different list classes we created above! We also need to declare the exact widths of the images that we will be using

.menu ul li#nav_home {
width:111px;
}
.menu ul li#nav_author {
width:129px;
}
.menu ul li#nav_blog {
width:90px;
}
.menu ul li#nav_contact {
width:170px;
}

Now, since these will be links, we need to specify the images that will be used when there is a link.

.menu ul li#nav_home a {
background-image: url(../images/home.jpg);
}
.menu ul li#nav_author a {
background-image: url(../images/author.jpg);
}
.menu ul li#nav_blog a {
background-image: url(../images/blog.jpg);
}
.menu ul li#nav_contact a {
background-image: url(../images/contact.jpg);
}

now there are a few things that are specific to the LI class that we need to address, and there are some specific things we need to write as they apply to LI items that are links.

.menu ul li {
float:left;
}
.menu ul li a {
display: block;
width: auto;
height: 40px; /*this is the same as the height of the image or the bar*/
background-position: 0 0;
background-repeat: no-repeat;
background-color: transparent;
text-indent: -9999px; /*this is so the text in the LI doesnt appear onscreen*/
overflow: hidden;
}
.menu ul li a:hover {
background-position: 0 -40px; /*this is the same as the height of the image or the bar*/ }

And volia! Now we have code for a graphical navigation bar!