Enable rtl horizontal menu in ja purity

From Joomla! Documentation

The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla. The relevant files, index.php, templateDetails.xml and ja-sosdmenu-rtl.css are in the following directories:
Note: The css file isn't installed as of version 1.5.11. You'll need to add this file to the site using the code below.

    templates/ja_purity
                 index.php
                 templateDetails.xml
                 css/
                     ja-sosdmenu-rtl.css

If you've been following the tutorial you can download a tutorial version of the template that installs to the following directory:
Note: The tutorial version of the template should include the ja-sosdmenu-rtl.css file but doesn't install it.

    templates/ja_purity
                 index.php
                 templateDetails.xml
                 css/
                     ja-sosdmenu-rtl.css

1. Modify index.php starting at line XXX

47. <!-- Added right to left check -->
48. <?php if ($this->countModules('hornav')): ?>
49.  <?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
50.   <?php  if($this->direction == 'rtl') : ?>
51. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
52.   <?php else: ?>
53. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
54.   <?php endif; ?>
55. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
56.  <?php else: ?>
57.   <?php  if($this->direction == 'rtl') : ?>
58. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
59.   <?php else: ?>
60. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
61.   <?php endif; ?>
62. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
63.  <?php endif; ?>
64. <?php endif; ?>

2. Change the ja-sosdmenu-rtl.css file to look like the following:

1. /* Son of Suckerfish Dropdowns
2. ---------------------------------------------------------
3. Originally developed by Patrick Griffiths and Dan Webb
4. http://www.htmldog.com/articles/suckerfish/dropdowns/
5. ---------------------------------------------------------
6. NOTE: After a deep research, we decide to divide this
7. CSS into 2 parts. The first part will define the layout.
8. The second part will define the visual look for this menu.
9. ---------------------------------------------------------*/
10.  
11. #ja-mainnav {
12.         margin: 0; /* all lists */
13.         padding: 0;
14.         float: none;
15.         text-align: right;
16.         border-left: 1px solid #555555;
17. }
18.  
19. #ja-mainnav ul {
20.         text-align: right;
21.                 margin: 0; /* all lists */
22.         padding: 0;
23. }
24.  
25. #ja-mainnav li ul {
26.         float: right;
27. }
28. #ja-mainnav li {
29.         margin: 0; /* all list items */
30.         padding: 0;
31.         float: right;
32.         display: block;
33.         background: none;
34.         cursor: pointer;
35.         position: relative;
36. }
37.  
38. #ja-mainnav li ul {
39.         width: 16.4em;
40.         position: absolute; /* second-level lists */
41.         z-index: 99;
42.         top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
43.         height: auto;
44.         w\idth: 15.9em;
45.         right: 0;
46. }
47.  
48. #ja-mainnav li ul ul {
49.         margin: -1.5em 0 0 14em; /* third-and-above-level lists */
50. }
51.  
52. #ja-mainnav li li {
53.         padding: 0 1em 0 0;
54.         margin: 0;
55.         width: 14.9em;
56. }
57.  
58. #ja-mainnav ul a {
59.         width: 14.8em;
60.         w\idth: 10.8em;
61. }
62.  
63. #ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul,
64. #ja-mainnav li.sfhover ul ul, #ja-mainnav li.havechildsfhover ul ul, #ja-mainnav li.havechild-activesfhover ul ul, #ja-mainnav li.activesfhover ul ul,
65. #ja-mainnav li.sfhover ul ul ul, #ja-mainnav li.havechildsfhover ul ul ul, #ja-mainnav li.havechild-activesfhover ul ul ul, #ja-mainnav li.activesfhover ul ul ul {
66.         top: -999em;
67. }
68.  
69. /* This "unhides" the sub-menus (left: -999em is what hides them) */
70. #ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul,
71. #ja-mainnav li.sfhover ul, #ja-mainnav li.havechildsfhover ul, #ja-mainnav li.havechild-activesfhover ul, #ja-mainnav li.activesfhover ul,
72. #ja-mainnav li li.sfhover ul, #ja-mainnav li li.havesubchildsfhover ul, #ja-mainnav li li.havesubchild-activesfhover ul, #ja-mainnav li li.activesfhover ul,
73. #ja-mainnav li li li.sfhover ul, #ja-mainnav li li li.havesubchildsfhover ul, #ja-mainnav li li li.havesubchild-activesfhover ul, #ja-mainnav li li li.activesfhover ul {
74.         top: auto;
75. }
76.  
77. /* STYLING THE MENU
78. -----------------------------------*/
79. /* 1st level */
80. #ja-mainnav li a {
81.         margin: 0;
82.         padding: 10px 20px;
83.         border-right: 1px solid #555555;
84.         border-left: 1px solid #333333;
85.         display: block;
86.         color: #CCCCCC;
87.         font-weight: bold;
88.         line-height: normal;
89.         text-decoration: none;
90. }
91.  
92. #ja-mainnav li a:hover,
93. #ja-mainnav li a:active,
94. #ja-mainnav li a:focus {
95.         background: url(../../images/arrow2.png) no-repeat bottom center #555555;
96.         color: #FFFFFF;
97. }
98.  
99. #ja-mainnav li {
100.         margin: 0;
101. }
102.  
103. #ja-mainnav li:hover,
104. #ja-mainnav li.sfhover,
105. #ja-mainnav li.havechildsfhover,
106. #ja-mainnav li.havechild-activesfhover {
107.         background: url(../../images/arrow2.png) no-repeat bottom center #555555;
108.         color: #FFFFFF;
109. }
110.  
111. #ja-mainnav li a.active,
112. #ja-mainnav li a.active:hover,
113. #ja-mainnav li a.active:active,
114. #ja-mainnav li a.active:focus {
115.         background: url(../../images/arrow2.png) no-repeat bottom center #333333;
116.         color: #FFFFFF;
117. }
118.  
119. /* 2nd level and above */
120. #ja-mainnav li ul {
121.         border: 1px solid #555555;
122.         background: url(../../images/opaque.png);
123. }
124.  
125. #ja-mainnav li ul li {
126.         border-top: 1px solid #777777;
127.         border-bottom: 1px solid #444444;
128.         background: none;
129. }
130.  
131. #ja-mainnav li ul a {
132.         border-left: none;
133.         margin: 0;
134.         padding: 7px 10px;
135.         background: none;
136.         color: #CCCCCC;
137.         font-weight: normal;
138.         line-height: normal;
139.         text-transform: none;
140. }
141.  
142. #ja-mainnav li.havesubchild,
143. #ja-mainnav li.havesubchild-active {
144.         background: url(../../images/bullet2.gif) no-repeat 94% 50%;
145. }
146.  
147. #ja-mainnav li ul a:hover,
148. #ja-mainnav li ul a:active,
149. #ja-mainnav li ul a:focus,
150. #ja-mainnav ul li:hover,
151. #ja-mainnav ul li.sfhover,
152. #ja-mainnav ul li.havesubchildsfhover,
153. #ja-mainnav ul li.havesubchild-activesfhover,
154. #ja-mainnav ul ul li:hover,
155. #ja-mainnav ul ul li.sfhover,
156. #ja-mainnav ul ul li.havesubchildsfhover,
157. #ja-mainnav ul ul li.havesubchild-activesfhover {
158.         background: #333333;
159.         color: #CCCCCC;
160. }
161.  
162. #ja-mainnav ul li a.active,
163. #ja-mainnav ul li a.active:hover,
164. #ja-mainnav ul li a.active:active,
165. #ja-mainnav ul li a.active:focus {
166.         background: none !important;
167.         color: #FFFFFF;
168.         font-weight: bold;
169. }

Here's the result...