RTLing Superfish Menu (jQuery Plugin)

Thank you Rami for the suggestion.

Superfish is a very famous jQuery plugin that allows you to add eye-catching effects to dropdown menus (<ul>). It works perfectly in major browsers (including IE6 with some style limitations) too. Well in RTL..it's just not there..so we're going to RTL this one.

What makes the superfish a very good plugin is that it doesn't specify or affect the layout/style of the menu itself, that's the CSS's job. That's why when you download the plugin with its example, you get one javascript file(superfish.js) which is responsible of the effect of showing/hiding menu items; and multiple CSS files for each style or type(horizontal, vertical and navbar).

So what does that mean? RTLing this plugin is nothing more than RTLling the CSS using the very old and same method (flipping the properties/values).

First, download the superfish plugin with its example (latest version at the moment of writing this tutorial is 1.4.8)

Second, open the superfish.css, superfish-vertical.css and superfish-navbar.css and flip the properties.

The most important part to flip is the one labeled with "/*** ESSENTIAL STYLES ***/" at the beginning of the superfish.css. Scan through the rules to point out the values to flip. The flipped CSS rules will be:

/*** ESSENTIAL STYLES ***/
.sf-menu li {float:right;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {right:0;left:auto;}

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {right:10em; left:auto;}

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {right:10em; left:auto;}

This method of flipping overrides the original stylesheet in a new one. It is used more in multilingual websites where both directions are included. Learn more about it at the tutorial "3 Different Ways to RTL your CSS". You can directly modify the files if it's not your case.

Then flip the /*** DEMO SKIN ***/ styles using the same rules in addition to the other CSS files. Below is the CSS for the default skin:

/*** DEMO SKIN ***/
.sf-menu {float:right;}
.sf-menu a {border-right:1px solid #fff; border-left:none;}

/*** arrows **/
.sf-menu a.sf-with-ul {padding-left:2.25em; padding-right:1em;}
.sf-sub-indicator {right:auto;left:.75em; background-image:url('../images/arrows-ffffff-rtl.png');}
.sf-shadow ul {
	padding:0 0 9px 8px; background-position:left bottom;

	border-top-left-radius: 17px;
	border-bottom-right-radius: 17px;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;

	-moz-border-radius-bottomright: 17px;
	-moz-border-radius-topleft: 17px;
	-webkit-border-top-left-radius: 17px;
	-webkit-border-bottom-right-radius: 17px;
	border-top-left-radius: 17px;
	border-bottom-right-radius: 17px;
}

What's left is the background images. You can ignore flipping rules that style the arrows(background images) since it's a CSS Sprite and background images are calculated exactly. All you need is flipping the arrows-ffff.png image horizontally and use the flipped one instead.

Guess what? That's it! Your menu is now functioning perfectly in RTL as it is in LTR.

If you're using superfish in your drupal installation(check the tutorial at adaptivethemes.com to do this), uploading the superfish-rtl.css style sheet will get it automatically included by drupal when the page is switched to an RTL language.

Check the Demo and/or download the Source files of the RTLed styles. Enjoy it!

Update @01-03-2010 14:00

Added a quick fix for IE6 RTL issues, both demo and source are updated.

Update @01-03-2010 14:35

Updated fixes to include IE7. Will address the issues in a separate tutorials

Average: 3.8 (31 votes)

Comments

Please test your RTL Superfish CSS against IE6

You're absolutely right..Apologies I missed that..

Luckily the fix is in two lines (Updated the Package)

The very corrupted layout is caused by nested floats (especially float:right), actually there's an upcoming tutorial about this..So a quick fix is by adding a width:100% (or any width.. like in the vertical one, it's set to the width of the items) to the ul.sf-menu menu

.sf-menu{ width:100%;}
.sf-menu.sf-vertical {width:10em;}

And the other issue is the allergy IE6 has to the relative positioning in RTL..so a quick fix is by adding:

.sf-menu li a {position:static;}

Thanks for the notice.

Oh! you have done it that fast. Thanks Layal :)

I'll begin testing it.

best wishes,
Rami

I am seeing that the RTL arrows have the opposite hover behavior of the standard arrows. They are bright when not hovered over, and get lighter when hovered over. Not sure how to fix that.

I think I figured out the fix. In my case I was using the vertical menu. Within the standard superfish-vertical.css file are styles for the arrow directions. I made these changes:

.sf-vertical a > .sf-sub-indicator { background-position: 0 0; }
changed to:
.sf-vertical a > .sf-sub-indicator { background-position: -10px 0; }

and

.sf-vertical li.sfHover > a > .sf-sub-indicator {background-position: -10px 0;}
changed to:
.sf-vertical li.sfHover > a > .sf-sub-indicator {background-position: 0px 0;}

My arrows are now the lighter shade when not hovered, and the brighter shade when hovered, as the original menu behaves.

Yes you're right :) You've figured it out. I'm not sure how these values changed when I flipped the CSS. Will update the package.
Thanks again for the notice ;)

I checked the CSS to see where I missed exactly. When I flipped the image, I also flipped the positions of the arrows themselves. So the CSS had to be changed.

Another solution is to flip the arrows themselves in the image and not their positions. I've updated the package with the updated arows-ffffff-rtl.png

Thanks again for the tip :)

Thank you
Very Useful
:)

After adding the fix every thing worked fine on all versions of IE even 6.0. I tested it on Jquery version 1.4.2. Great, keep the good job please, thank you so much for your efforts.

best regards
Hussain

best regards
i spent a lot of time on apycom menus (www.apycom.com) for converting to RTL .but not good results
whould you please help me on this. if you can help me it is very very very usefull for me. and it is a geat favour
thanks.

Sure..will write up a tutorial for it =)

hi
very very very thanks!

:-) you saved me lot of time

hi.could you please show me a way to rtl an apycom menu?
it is very appreciated.
thank you very much.

Hi, thanks
and when fix superfish in IE7?

you said: Updated fixes to include IE7. Will address the issues in a separate tutorials

Greetings! I've been reading your weblog for a long time now and finally
got the bravery to go ahead and give you a shout out from Humble Texas!
Just wanted to mention keep up the fantastic work!

Add new comment

Twitter Updates

Recent comments

Who's online

There are currently 0 users online.