I've received couple of requests to RTL the Apycom menus. They're really nice and animated jQuery menus that you can use for free(non-profit websites only). And like all other modern menu plugins, all styling can be controlled through CSS. So RTLing an Apycom menu is simply RTLing its CSS.

For this tutorial, I'll show you how to RTL one of the menus available by Apycom: Style 07 (Gray). The same concept applies to the rest of them.

First, download the menu files and extract the archive to your localhost. Create an rtl.css file and copy the directional styles in menu.css to it and RTL them (Check this tutorial for more info on RTLing CSS):

#menu li {
    float:right;
}

#menu div div {
    margin:-24px -1px 0 0;
    left:auto; right:100%;
}

#menu li li a.parent span {
   background:url(images/rtl/pointer.gif) no-repeat left 9px;
   _background-position:left 10px; 
}

*+html #menu li li a.parent span { background-position:left 10px; }

#menu li li span {
   padding:4px 14px 4px 25px;
 }

Notes on the above rtl.css:

• The images/rtl/pointer.gif image is a copy of the images/pointer.gif that was flipped horizontally.[Check this tutorial for more about RTLing background images]
• You'd notice that we skipped the last rule for the "lava lamp". This part is controlled by the JS and it highlights the selected/highlighted menu item with a nice animation. This works well in the RTL version so no need to change it.

Now include this file right after the menu.css link in your HTML page and you're good to go. Don't forget the dire="rtl" or direction:rtl; added to your HTML or CSS respectively. See how easy this was? Check out the demo below for demonstration.