Создание меню со сложными графическими кнопками для нуба...

Здравствуйте! Создаю сайт на базе джумлы в первый раз. Застрял на этапе создания меню... В чистом html меню выглядело так:

Код (PHP):

1. <script language="JavaScript">
2. <!--
3.  function buttonFlash(menuNumber,direction) {
4.   document.getElementById("button_" + menuNumber).className="content_left_menu_lamp_" + direction;
5.   document.getElementById("button_text_" + menuNumber).className="content_left_menu_text_" + direction;
6.  }
7. // -->
8. </script>
9.  
10. ...
11.  
12. <div class="content_left_menu">
13.   <a href="#">
14.     <div class="button_cont" onmouseover="buttonFlash(1,2);" onmouseout="buttonFlash(1,1);">
15.       <div class="content_left_menu_lamp_1" id="button_1"></div>
16.       <div class="content_left_menu_text_1" id="button_text_1">ГЛАВНАЯ</div>
17.     </div>
18.   </a>
19.   <a href="#">
20.     <div class="button_cont" onmouseover="buttonFlash(2,2);" onmouseout="buttonFlash(2,1);">
21.       <div class="content_left_menu_lamp_1" id="button_2"></div>
22.       <div class="content_left_menu_text_1" id="button_text_2">ЗАЯВКИ</div>
23.     </div>
24.   </a>
25.   <a href="#">
26.     <div class="button_cont" onmouseover="buttonFlash(3,2);" onmouseout="buttonFlash(3,1);">
27.       <div class="content_left_menu_lamp_1" id="button_3"></div>
28.       <div class="content_left_menu_text_1" id="button_text_3">КОНТАКТЫ</div>
29.     </div>
30.   </a>
31.   <a href="#">
32.     <div class="button_cont" onmouseover="buttonFlash(4,2);" onmouseout="buttonFlash(4,1);">
33.       <div class="content_left_menu_lamp_1" id="button_4"></div>
34.       <div class="content_left_menu_text_1" id="button_text_4">ФОРУМ</div>
35.     </div>
36.   </a>
37. </div>

В CSS было вот что:

Код (PHP):

1. .content_left_menu {
2.     height: 200px;
3.     width: 219px;
4.     padding-top: 80px;
5. }
6. .button_cont {
7.     height: 59px;
8.     width: 219px;
9.     cursor: hand;
10. }
11. .content_left_menu_lamp_1 {
12.     background-image: url(../images/button_lamp_green.png);
13.     background-repeat: no-repeat;
14.     background-position: right;
15.     height: 59px;
16.     width: 69px;
17.     float: left;
18. }
19. .content_left_menu_lamp_2 {
20.     background-image: url(../images/button_lamp_red.png);
21.     background-repeat: no-repeat;
22.     background-position: right;
23.     height: 59px;
24.     width: 69px;
25.     float: left;
26. }
27. .content_left_menu_text_1 {
28.     background-image: url(../images/button_text.png);
29.     background-repeat: no-repeat;
30.     height: 39px;
31.     width: 130px;
32.     float: left;
33.     font-family: Arial, Helvetica, sans-serif;
34.     font-size: 16px;
35.     font-weight: bold;
36.     text-align: center;
37.     color: #06ff00;
38.     padding-top: 20px;
39.     padding-right: 20px;
40. }
41. .content_left_menu_text_2 {
42.     background-image: url(../images/button_text.png);
43.     background-repeat: no-repeat;
44.     height: 39px;
45.     width: 130px;
46.     float: left;
47.     font-family: Arial, Helvetica, sans-serif;
48.     font-size: 16px;
49.     font-weight: bold;
50.     text-align: center;
51.     color: #FF0000;
52.     padding-top: 20px;
53.     padding-right: 20px;
54. }

Скриншот:

Тоесть кнопки состоят из двух DIVов. При наведении на всю кнопку меняется левая картинка (лампочка) и цвет текста правой части кнопки.

А теперь внимание вопрос: Как мне всё это реализовать в джумле?? Куда запихивать этот код?? Достаточно ли стандартной джумловской менюшки или надо обязательно ставить сторонние модули??

 

На сколько я знаю меню в joomla 1.5.X меню реализовано примерно так:

<ul class="menu">
<li id="current" class="active item1"><a href="">Пункт 1 </a></li>
<li><a href="">Пункт 2 </a></li>
<li><a href="">Пункт 3 </a></li>
<li><a href="">Пункт 3 </a></li>
</ul>

Пункт 1 - это активная ссылка.
Разобраться оч. просто. Иногда просто стоит просмотреть исходный код меню, или того блока который тебе нужно оформить (CTRL + U - Google Chrome)