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!