Background Images and Son of Suckerfish Menus

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.