+7 (499) 709-98-06

Оригинальный JA чистоты шаблона была предоставлена из JoomlArt.com как ZIP, но последние версии файлов были установлены вместе с Joomla. Соответствующие файлы, index.php, templateDetails.xml и JA-sosdmenu-rtl.css находятся в следующих каталогах:
Примечание: CSS файл не устанавливается, начиная с версии 1.5.11. Вам нужно добавить этот файл на сайт, используя код ниже.

  templates/ja_purity
                 index.php
                 templateDetails.xml
                 css/
                     ja-sosdmenu-rtl.css
Если вы следили за учебник вы можете скачать учебник версию шаблона, который устанавливается в следующем каталоге:
Примечание: учебник версию шаблона должна включать JA-sosdmenu-rtl.css файл, но не устанавливает его.

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

1.Изменить index.php, начиная с линии XXX

1. <!-- Added right to left check -->
2. <?php if ($this->countModules('hornav')): ?>
3. <?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
4. <?php if($this->direction == 'rtl') : ?>
5. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
6. <?php else: ?>
7. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
8. <?php endif; ?>
9. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
10. <?php else: ?>
11. <?php if($this->direction == 'rtl') : ?>
12. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu-rtl.css" type="text/css" />
13. <?php else: ?>
14. <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
15. <?php endif; ?>
16. <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
17. <?php endif; ?>
18. <?php endif; ?>

1. <?php endif; ?>

1. Изменение JA-sosdmenu-rtl.css файл выглядит следующим образом:

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

Вот результат ...