jQuery Superfish Menu Styling

Categories: Tips

I recently had the opportunity to get my hands dirty with the jQuery based menu - Superfish. If you're not familiar with the menu system, its definitely worth checking out. See either the jQuery plugin page, or the author's website. Why did I choose to test out this nav system? It's free, lightweight (4KB), built by an unordered list - which can help out for SEO purposes, jQuery based, and it works well across many browsers - yes, even IE6.

One problem I ran into when trying to implement this menu is dealing with first level menu items as images. Typically I've built menus that have images as the first level, and when rolled over a particular item, or any of its children, the first level image is replaced with an "over" state. This is functionality that you would normally expect from a menu, although without doing a bit of trial and error, it's somewhat difficult to achieve with CSS in Superfish.

If you're in this same boat, maybe I can save you an hour or three.

Let's say I was styling this particular menu (excuse the code formatting):

<li><a href="/about.cfm"><img src="/spacer.gif" alt="" width="200" height="20" /></a></li>
<li><a href="/contact.cfm"><img src="/spacer.gif" alt="" width="200" height="20" /></a></li>
<li><a href="/products.cfm"><img src="/spacer.gif" alt="" width="200" height="20" /></a></li>

Step 1 - Disable autoArrows

When creating your Superfish menu, make sure to include autoArrows: false. Code shown below:

$(document).ready(function() {
      dropShadows: false, //optional, but I prefer this option disabled.
      autoArrows: false

Step 2 - add classes to your first level <a> items

Add a class to each first level item, and make it unique. Code shown below:

<li><a class="about" href="/about.cfm"><img src="/spacer.gif" alt="" width="200" height="20" /></a></li>
<li><a class="contact" href="/contact.cfm"><img src="/spacer.gif" alt="" width="200" height="20" /></a></li>
<li><a class="products" href="/products.cfm"><img src="/spacer.gif" alt="" width="200" height="20" /></a></li>

Step 3 - CSS

Add some css to the top area of your stylesheet.

ul li a.about{
   background: url('about.gif') no-repeat;

ul li.sfHover a.about, ul li a.about:hover{
   background: url('about-over.gif') no-repeat;

ul li a.contact{
   background: url('contact.gif') no-repeat;

ul li.sfHover a.contact, ul li a.contact:hover{
   background: url('contact-over.gif') no-repeat;

ul li a.products{
   background: url('products.gif') no-repeat;

ul li.sfHover a.products, ul li a.products:hover{
   background: url('products-over.gif') no-repeat;

That's it! Add any comments or questions below.

10 responses to “jQuery Superfish Menu Styling”
  1. Flavio Says:

    Awesome post - this saved me hours! However, I just have one small problem that I can't seem to shake. There is a 2px padding showing up below the nav images that I can't seem to get rid of. The only thing that seemed to work is to set:
    .sf-menu {line-height:   0;}

    But then it kind of messes up the subnav items. Besides, it just doesn't seem to be the proper way to fix this. If I take out the above property entirely, the problem shows up again. You can take a look here to see what I mean:


    The only changes I've made to the standard css file (aside from your suggestions above) is to set:
    .sf-menu a {padding:0}

    Do you have a working example of this? I wouldn't mind looking at the css to see where I'm going wrong.

    Thanks in advance to any light you can shed on this!
  2. George Says:

    Hi Flavio,

    Please check out http://www.woodysrv.com/ as a working example of where we have done this.
    If you happen to find a solution to your problem, or if I have missed a step in this blog posting please let us know.
  3. Flavio Says:

    Thanks George - Looks like you're using a different DOCTYPE - the strict.dtd was causing that little issue for me.

    However, I did notice one other problem with Superfish. Since you are not putting anything directly below the navigation it's not a concern on your RV site. However, Superfish seems to not allow you to put anything directly below the main nav (with or without the image-based nav). There seems to be dead space right below the nav, making it difficult to have something but right up below it - I'll have to play around a bit to get it to fit properly.

    Thanks again for this tip - it definitely helped me, and saved me hours of headaches!


    PS. Love the RV site - looks fantastic and works great!

    PSS. ColdFusion rocks ;-)
  4. Flavio Says:

    OK - I figured out how to get rid of the spacing below the nav - just reset the padding in the main <ul>:

    <ul class="nav" style="padding:0; margin:0;">

    Even though the padding and margin are set to 0 in the css, I guess something happens when the Superfish code parses through the list, manipulating the margin.

    I noticed this using FireBug in FF browser - if you highlight the main <ul>, the css associated with that element is displayed on the right side. You will notice that the padding and margin properties are crossed out, meaning that it is being overwritten somewhere else.

    This will definitely make it easier to add this code to any design.

    Anyway, just thought I'd share. Cheers!

  5. Stephane Says:

    Not sure this would answer the above issue with the image unexplained margin, but bear in mind that images are displayed on a baseline, just like text is, that is, with some space bellow the baseline. Having the image aligned top is a work around.
  6. António Says:

    How can I add classes to my first level <a> items ? I have lost hours formating my menu and only need to insert my top level images. Can you help me, please? This is very urgent.
  7. George Huber Says:

    Hi António, I'm not sure of your question here. Does Step#3 in the tutorial above not answer it?
  8. Antonio Says:

    Hello George,

    Thank you for your help.

    Yes it does. My problem is that I don't know how to add the CLASS to my first level menu items using Joomla (#STEP 2).

    Can you please help me?

    Best regards.

  9. George Huber Says:

    Hi Antonio,

    I haven't yet tried this for Joomla... I was able to do this with the superfish drupal plugin though.

    Luckily with the drupal plugin, for each <li> it added an id attribute (<li id="menu-111-1">), therefore I was able to do something like:

       background: url('/themes/eph/images/nav-01-vision.png') no-repeat;
       width: 102px;

    The style is applied to the LI element, rather than the <a>.. so there's a few ways to go about achieving whats described in this tutorial.
  10. artem - RUSSIA Says:

    How i can re-design autoArrows?
    I want to see them pointing downwards or put up your picture!

Leave a Reply

  • Twitter
  • Facebook
  • LinkedIn