This tutorial expands on my last CSS pop up menu tutorial. This time I will focus on how to use image "buttons" in the menu rather than plain text.
I will not be editing any of the code that makes the "pop up" part of the code work - so these changes can easily be added to either the horizontal or vertical versions of the code. For this tutorial I will use the horizontal one in the examples.
Firstly We will need to create some images to use as buttons. For this tutorial I have created simple buttons for each menu item, plus one more for each which is a different colour which will be displayed when you roll over it.
Normal:
Rollover:
Next up, we need to edit the HTML part of the code. Right now we have an unordered list, and each list item looks like this:
| <li><a href="/img_articles/12090/index.html">Home</a></li> |
We need to edit this so that we can include the image effects:
| <li id="home"><a href="/img_articles/12090/index.html"><span>Home</span></a></li> |
For each menu item the "<li>" element is given a unique id - in the above example "home". This will be used by the css to reference each menu item. The text inside the link has been surrounded by a "<span>" tag. You will need to make these changes to each menu item.
Next up, onto the CSS. This is added:
|
ul li span {
display: none; } |
This will tell everything inside the "<span>" tags we just added not to be displayed - this is because we're replacing it with an image in a minute! This will get rid of all the text like so.
As you can see from the example, the menu items has shrunk because they are empty, so following lines of code are added:
|
ul li a {
width: 125px; height: 15px; } |
This gives the links themselves a size - which is the width and height of each menu item (remember, even though each item is 25px tall, there is a 5px padding applied to the top and bottom - so this is taken off to make a height of 15px!). As you can see now, the menu items are still blank, but are the correct size.
Now we need to add the images to the menu. The following code is inserted:
|
ul li#home a {
background: url(images/home.gif) no-repeat; } ul li#home a:hover { background: url(images/home_on.gif) no-repeat; } |
The above code finds the menu item with the id "home". It gives the link inside it a background of the image we have created for the home button. It also tells it to change the image to the "_on" version we've created when it is hovered over. Click here to see this in action, the home button is dropped in the background and is changed on roll over.
This code must now be repeated for each menu item, replacing the ids and image urls to the correct ones for each item. It would be pointless posting lines and lines of code here as it is all basically the same!
Once this is complete each menu item should have its own image along with rollover, click here to see the full menu in action!
More HTML and CSS: 
