How to Use CSS Sprites With Son of Suckerfish Drop Downs

Jun
22

36 Comments - LEAVE A COMMENT

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):

CSS Sprite for Navigation with Son of Suckerfish Dropdown

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.

Jump to Comments

36 Responses to How to Use CSS Sprites With Son of Suckerfish Drop Downs

  1. Mikko Tapionlinna says:

    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.

  2. Lindsey says:

    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.

  3. Mikko Tapionlinna says:

    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.

  4. Lindsey says:

    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.

  5. Mikko Tapionlinna says:

    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.

  6. Lindsey says:

    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.

  7. Lindsey says:

    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.

  8. Awarnach says:

    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.

  9. Ben Toh says:

    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.

  10. Pixi says:

    Hi , thats for the simple technique, works a treat!

    QQ: I am using this across a few pages as the header nav.. and wanted to somehow define the over state to be shown when page is ‘active’ ? something like ..

    #navi a:active.feature {
    background-position:-63px 30px;
    }

    Not sure if this is being done correctly..

    I also tried this

    #navi a.featurePageActive {
    background-position:-63px 30px;
    }
    and changes the class of the link

    Feature tour

  11. Aaron says:

    Can this be done without having access to class names on the a tags?

    I’m having a heck of a time getting drupal’s menus to spit out “a” tags with different class names.

  12. KemGem says:

    Can anyone help me out quick? I’m trying to pull this off on borrellelectric.com/test but I’m running into issues (obviously). I’m guessing there’s confusion in my styles for the UL lists and it’s forcing my sprite based navigation to cascade vertically instead of span horizontally.

  13. V says:

    Ok Mikko (first poster) seriously? who cares how it looks on a nokia phone? Anyone who uses their phone to view a website has GOT to already be accepting to the fact that it’s not going to be the equivalent of a browser on a REAL computer.

    *rolls eyes*

    Seems like you’re just a pessimist who has a bit of an ego trip and finding any possible flaw with her code.

    Gimme a break.

  14. cheekylele says:

    i’ve learnt both the suckerfish, superfish and css sprite image replacement techniques but never seen both techniques being used in combination so THANK YOU HEAPS for showing how you did this … and youre completely right when you say clients are picky about the fonts they want to use and the colour treatment and sometimes the standard web safe fonts in a conventional list just arent an option
    this is awesome … thank you!

  15. cheekylele says:

    oh yes one question i wanted to ask is …. do you know how to apply rounded corners to the drop downs?

    Heres a link to what I’m working on :
    http://www.spiffmedia.com/clients/ppnz/template_suckerfish.html

  16. cheekylele says:

    oh never mind i got it working haha oops!
    apologies for the multiple posts but yes I managed to incorporate rounded corners: combining this article http://www.realfreewebsites.com/articles/suckerfish-rounded-corners/ and applying that rule to the css style for: #drops ul.drop

  17. First I found suckerfish, and then I found this! If I keep finding things I’m looking for I’m due to come across a million dollars soon!

  18. Lindsey says:

    If you do…. please break me off just a few grand, lol.

  19. jitendra says:

    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.

    pls tell me in conditional part how to set width for different top level items?

  20. james says:

    hello, have been searching for a navigation like this for soo long so very happy to have stumbled across this!

    I have an issue I really hope someone can point me right as I can see what “I” have broken! grr

    http://s133577937.websitehome.co.uk/creativedesign/Metroweigh.com/index.asp

    In IE6 all the buttons repeat themselves, so somewhere i have changed something i shouldn’t have… any help would be appreciated, cheers

  21. james says:

    Discovered the error, i was using a PNG image on the navigation and needed a fix to display correctly in IE6 (supersleight). But then IE6 would blow out the CSS for the image positioning for some odd reason.

    So changed navigation image to a gif and all works!

    Cheers!

  22. Rod says:

    Thank you so much for this… i needed it desperately.

    Greets from Chile… as Woopra already told you where i´m from…

    Rod.

  23. Jeff says:

    The dropdowns do not work in I.E. 7. If the dropdown is wider than the parent link, the sprite gets broken. How do you ‘float’ the dropdowns so that when they exceed the parent , the entire sprite does not break?

  24. udhien says:

    Hi Lindsey,

    I just made a correction in suckerfish-sprites.css file.

    Line 232 should be:
    #nav a#active3 {

  25. I think you forgot to close the div ‘container’ in your example page?

    I am a HUGE fan of the suckerfish menu and it’s cross compatibility with older browswers – I use it on my site.

    Cheers!

    You have a wonderful site!

  26. Jeff says:

    Great tutorial, I’ve used it many times. Working on a site now, http://thinkdesign.net/proofs/chesnee/dev/ (demo), and oddly enough in IE7 only the drops have issues. If you move the mouse onto the drops and then move off the menu, the drops stay there until you move the mouse back up over the main drop.

    Any thoughts?

  27. Frank says:

    Thanks a lot! God made girls/women to be helpers to boys/men. I’ve been looking for this tuts for long thank God I’ve found u.

    I know how to create the image sprite nav allright but have a problem with the dropdowns. I downloaded your “son of suckerfish” codes allright but couldn’t implement it. I’m confused with the selectors. Can u help me ?…:)

  28. Richard says:

    Ok…did the sprite and stacked my images one on top of the other with a height of 96px since each button is 32px in height. My issue now is I get no hover and the image is cutoff about 2/3 on the right. I can’t seem to get it to work correctly am I missing something?

  29. Alex says:

    Great! This helped me get what i needed, but there is one more thing i do need help on. If anyone could help me on this. How do i create the hover background color in the drop down menu links? Thanks!

  30. […] And a tutorial http://www.cssgirl.com/resources/2008/06/22/how-to-use-css-sprites-with-son-of-suckerfish-drop-downs… […]

  31. John says:

    Thanks Lindsay, I spent hours on a design only to have the client ask… ‘can we add a drop down menu to this’ :-( this post has saved me… you should add a PayPal ‘Donate’ button then I could buy you a coffee :-)

  32. wat says:

    hey, i was trying to find the kitchen but i believe you dont have one so i was wondering why doesnt a woman have a fricking kitchen…ps swoopy loopy trolololo :) umadbro? ;B OMGWTFBBQ!!!!1!oneeleven!!!11!

  33. Al says:

    Hi Lindsay.

    Thanks for the sweet combination. I have been using a similar css images sprite arangement for a site I developed with a single dropdown driven by javascript.
    It had worked on a different site that I developed and still does but for some reason, I discovered that this time, it doesn’t work properly in IE7, IE8, does work IE9, not in IE10.
    Of course it works fine in all the real browsers.

    Your combination with the suckerfish code works a treat, thanks for such a helpful post.

    I’d like to share with everyone here, how I deal with the “Page Current State” which was generously donated by another internet champion that I can’t remember.
    I have replaced the tag openings with brackets so as not to screw with the coding on page.

    CSS:
    after-
    #nav a.buyersguide:hover {
    background-position:-553px -30px;
    }

    #nav a.contact:hover {
    background-position:-680px -30px;
    }

    etc comes-
    #nav a.homecurrent {
    width:76px;
    background-position:left -60px;
    }

    #nav a.newscurrent {
    width:73px;
    background-position:-76px -60px;
    }

    (the width of each button has to be added for it to work)
    and add these classes to the call where you assign the image:
    #nav a.home, #nav a.news, … etc … {
    float:left;
    background:url(../images/site-nav-menu.png) no-repeat;
    height:30px;
    text-indent:-999999px;
    }

    becomes-
    #nav a.home, #nav a.news,… etc … #nav a.homecurrent, #nav a.newscurrent, … etc … {
    float:left;
    background:url(../images/site-nav-menu.png) no-repeat;
    height:30px;
    text-indent:-999999px;
    }

    HTML – (I use PHP to find out if we are on the current Page)

    (ul id=”drops”)

    (li)(a (?php if (basename($_SERVER[“SCRIPT_NAME”]) == “index.php”) echo ” class=’homecurrent’ “; else echo “class=’home’ “;?)href=”index.php”)home(/a)(/li)

    (li)(a (?php if (basename($_SERVER[“SCRIPT_NAME”]) == “news.php”) echo ” class=’newscurrent’ “; else if (basename($_SERVER[“SCRIPT_NAME”]) == “news-menu.php”) echo ” class=’newscurrent’ “; else echo ” class=’news’ “;?)href=”news-menu.php”)news(/a)(/li)

    Sorry if it’s confusing changing the open/close tag symbol to open/close brackets.

    If your page has parameters i.e. news.php?id=23 you can use basename($_SERVER[“REQUEST_URI”]) instead and it will work.

    Please fell free to use this method as the kind soul who I got it from, generously gave it to the world to use.

    Thanks again CSS-Girl.
    Love ya work.

  34. Joyce says:

    Hi, I’ve tried using suckerfish dropdown menubar but I have a problem. The dropdown menu doesn’t appear on top of the jquery slider I have inserted below the menu bar. It’s called wowslider. Any idea why this is happening?

  35. Hello CSSGirl!

    Thanks for sharing your knowledge about it. Helps me a lot!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>