How to Use CSS Sprites With Son of Suckerfish Drop Downs
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).
Click here to see the example of the sprite with dropdowns.
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.
Trackback
Comments
This all seems great, but I wonder why this menu had to be image based?
I mean, it can be done with text-based approach to look quite close to what you have. And I think that I do not have to explain in detail why an text based solution is more reachable..
Nonetheless, it’s good to have an example like this if there’s a real need some day.
It wasn’t a matter that it HAD to be image based, it’s just what I chose to do based on some time restraints and to preserve the actual look of the tabs (some clients are very, very picky when it comes to the way fonts look in Photoshop VS on an actual site).
It definitely can be done with text with no problems - but this way doesn’t cause too many problems - with the CSS disabled the tabs turn into a normal list of links, with a sublist of links below their parent (this is good for visitors that could be on a mobile device that disable style sheets).
Thanks for commenting.
Well, yes, but my main concern are the users with css on but images off, like me when I try to save the memory load of my Nokia phone browser. (I have not yet found a setting to disable also/only css on my phone)
After all main navigation is quite essential part of the site usability.
When I check on my blackberry this method works perfectly. The images aren’t actually images in the HTML. They are background images for the links so if images are disabled/css disabled the links will show up in their space. If you view my site on a mobile browser (I check once a week on my Blackberry) my main nav is also image based - but it doesn’t use images embeddded in the HTML it used the sprite method with background images. The blackberry automatically hides background images. My links all still show.
So usability is intact as the links will show with images, without images and without CSS. Check out the nav of this site on a mobile browser.
Here are two examples how your demo and site fail with this approach when css is on and images off.
When I turn images off in my mobile (or normal) browser, it does not load images, not even background images.
http://arkkimaagi.googlepages.com/demo.jpg
http://arkkimaagi.googlepages.com/site.jpg
As you can see, your site is not very usable in the menu department. I’m not trying to be mean or anything. I just noticed this problem from the code and wanted to show it to you.
Hmmm, interesting. I have checked my blackberry and it does work the way I explained above (images gone, general link list).
See:
I also checked my sites on one of my friends iPhones at work and also displays ok.
You are correct though if you disable images all the way this method does not work.
I’m going to have to sit and think a bit how to modify this when a user disables images :/ The problem obviously exists because of the negative text indent used to hid the text and display the images instead.
Of course for this specific example I could just redo it and use the tab backgrounds and have the links on top, but for more graphically intense sites that use custom fonts not cross-platform this of course wouldn’t work.
Thanks, I’m definitely going to mess around with this.
Actually, I guess the best way to go about it would be to just use images in the HTML so that when images are disabled it would default to the alt text.
[...] (more…) [...]
In the conditional formatting part for IE7 you should define different left margins for the different top level items. FF renders everything correct (of course), but the margin-left for IE7 should be the width of the corresponding top level. Then the sub items float nicely under its parent.
how do we keep the css sprites rollover “intact” when we are at the drop down menu? It seems that the rollover status disapper while we mouse down to the dropdown menu.
