jQuery Superfish Menu Styling

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

Flavio Says:
Mar 29, 2010 at 8:57 AM
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:

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.

Flavio Says:
Mar 29, 2010 at 11:17 PM
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!

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!

F.

Stephane Says:
Apr 13, 2010 at 2:05 AM
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.

António Says:
Sep 16, 2010 at 3:33 PM
Hi,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.