So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.
I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.
This is what your file should look like after you have finished styling it to your liking (click to enlarge):
As you can see, for ease of writing the CSS I have exactly line up each navigation style exactly below the “normal” style. The middle is the “hover” images, with the last being our “current/active” tab styles.
Now, the CSS for the sprites is pretty simple – I’ve made a class for each tab that defines the height, width and background position. Next, I added the hover styles for each class, just changing the background position. Finally, to achieve the “current” styles, I added an id to be applied for when that particular link is “active” (ie: you are on one of the pages).
The code is pretty long for the CSS so I’m not going to post it directly into this post, so you can check it out here.
As you can see I renamed the primary id for the suckerfish menu to #drops (in example by HTMLdog it’s #nav – which I had already used as a container for my entire tab scheme). From there I pretty much changed everything to fit in with the navigation I had already built (using floats) except for the main “switch” that hides the drop down until it’s hovered over (the negative absolute positioning and the “left:auto” to bring it back). Of course the modification brought some IE6/IE7 issues so when you view source of the HTML you can see the two conditionals I added to fix the problem (mostly margin based).
As you can see combining the two methods is not hard at all and takes a little extra markup and a little extra CSS.
If you have tried this method and used it successfully leave a comment to show you’re awesome work!! If not, and you need some help troubleshooting leave a comment with the problem and we can work it out.