This was another challenging coding project I was asked to do. You can see the results at YP4.org. As you can see, the top menu requires images, each a different width. The height remains the same but because of the offset text on rollover, using text to trigger the menu was not an option. I did a bit of research and found this really old gem of a tut by Eric Meyer. I decided to try it, since nothing else was working. The difference was that when I created the transparent gif, for each menu item I changed its width in the img tag to match the width of the actual image. Then I set the nav image to be the background image. So these are triggered by transparent gifs. For each and every menu item I created, I followed Eric Meyer’s directions at the link above. I ended up with this:

/**(SET THE FIRST ONE JUST ONCE)**/
li a img {height: 52px; border-width: 0; border-right:1px solid #e9e9e9;}
li a#about {background:url(../images/nav/nav_about.gif) top left no-repeat;}
li a#about:hover {background: url(../images/nav/nav_about_over.gif) top left no-repeat;}

Remember that I had to define the background image and hover image for each one of those ID’d links, 6 in total. Not the most economical coding, perhaps, but it did the trick. AND it allowed my Son of Suckerfish menus to work very nicely underneath it.

The caveat to this this trick is that it ALSO required some extra coding for the Suckerfish menus to work properly. This code allows the top level “over” state to remain on when you are mousing over the drop downs. Again, this has to be repeated for every link.

#mainNav li:hover a#about, #mainNav li.sfhover a#about{
background:url(../images/nav/nav_about_over.gif) top left no-repeat;
}

EVERYTHING on the top level menu is an image, except for the grey border on the left which I defined in that top line of CSS. The next trick was to match the shadows AND borders for the drop downs, which is completely rendered with CSS. The only image I used here was to help me create the shadow that underlies the whole drop down - a small red triangle.

Son of Suckerfish CSS menus are a fantastic tool. I used them to to create these menus:

http://www.cops.cc

But wait! That is a far cry from the samples AT Son of Suckerfish. How did I do it? Lots of blood, sweat and tears, to be honest. But I’m going to share some of my tips with you. Let’s assume that you are starting with a Son of Suckerfish vertical menu. The first question would be how did I get rollover images to work with the CSS? First, set your background image for your first level navigation. You will be required to use text as a placeholder and you need to make sure that you can use ONE background image for all the navigation.

Next, you set your first level background image like this:
#nav a {
display: block;
width: 10em;
background-image:url(images/nav_image.gif);
}

OK, that’s stationary. For the hover image, you will need to set the background image for the first level hover and sfhover, creating the following style:

#nav li:hover a, #nav li.sfhover a{
background-image:url(images/nav_image_over.gif);
}

When you test the above, you will notice that your 2nd level picks up those same images. Very likely you want something different for your 2nd level, such as standard CSS menu creation. You need to override the background image of your 2nd level links and hovers. Add the following code “background-image:none;” to 2nd level hover, like this:

#nav li ul li a:hover{
background-image:none;
}

Now the only problem that remains is removing the background image from the off state of the link. See that Suckerfish code where they set left variables for various li:hover options? You need to the style the a for the next level also to remove that background image, like this:

#nav li:hover ul a, #nav li.sfhover ul a{
background-image:none;
}

Keep in mind that if you are using more levels, you will need to style the links within the hover and sfhover states repeatedly.

When I was on the project, I did not figure this out. For the Cops site, I created a class called “sub” and assigned it to all the 2nd level “a” tags, which in retrospect boils down to the same thing. This tested well on current browsers and Mac/PC/Linux platforms.

What if you have a horizontal menu, with DIFFERENT size images AND text that jumps from on state to off state? Can you still use Suckerfish? Heck yea! That will be my next topic for discussion.