Joomla!WikiPL

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. ---------------------------------------------------------*/

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. }

19. #ja-mainnav ul {

20. 	text-align: right;

21. 		margin: 0; /* all lists */

22. 	padding: 0;

23. }

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. }

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. }

48. #ja-mainnav li ul ul {

49. 	margin: -1.5em 0 0 14em; /* third-and-above-level lists */

50. }

52. #ja-mainnav li li {

53. 	padding: 0 1em 0 0;

54. 	margin: 0;

55. 	width: 14.9em;

56. }

58. #ja-mainnav ul a {

59. 	width: 14.8em;

60. 	w\idth: 10.8em;

61. }

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. }

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. }

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. }

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. }

99. #ja-mainnav li {

100. 	margin: 0;

101. }

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. }

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. }

119. /* 2nd level and above */

120. #ja-mainnav li ul {

121. 	border: 1px solid #555555;

122. 	background: url(../../images/opaque.png);

123. }

125. #ja-mainnav li ul li {

126. 	border-top: 1px solid #777777;

127. 	border-bottom: 1px solid #444444;

128. 	background: none;

129. }

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. }

142. #ja-mainnav li.havesubchild,

143. #ja-mainnav li.havesubchild-active {

144. 	background: url(../../images/bullet2.gif) no-repeat 94% 50%;

145. }

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. }

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... 640px

© Ten materiał jest dokładnym albo swobodnym tłumaczeniem artykułu http://docs.joomla.org/Enable_rtl_horizontal_menu_in_ja_purity udostępnionego na licencji JEDL na witrynie: Joomla! Official Documentation Wiki

Dziękujemy za wkład

» Stefan Wajda [zwiastun],