Создаем горизонтальное выпадающее меню на joomla 1.5

Сегодня рассмотрим как создать простое горизонтальное выпадающее меню на сайте под управлением joomla 1.5. Разберем самый простой способ создания меню при помощи модуля HxD MooMenu 4.

Скачать данный модуль можно тут. Такой способ создания меню хорошо подойдет для людей не очень разбирающихся в joomla и CSS.

Итак, в шаблоне имеется место в хедере, где необходимо реализовать верхнее горизонтальное меню. Для начала вставляем код вывода модуля в файл index.php.
Например у нас верхнее меню будет выводиться в позиции “top”:
<div id="header">
                <div id="header_l">
                    <div id="header_r">
                        <div id="logo"></div>
                        <jdoc:include type="modules" name="top" />
                    </div>
                </div>
            </div>

Формируем первоначальную структуру сайта, добавляем соответсвующие разделы, пункты меню.

Устанавливаем модуль HxD MooMenu 4.

В настройках выбираем наше меню, в данном случае «mainmenu», публикуем модуль в позиции top. Больше в настройках ничего изменять не нужно

Вот что получилось:

Настройка внешнего вида меню, правка CSS.
Для правки CSS нашего меню необходимо редактировать файл hxdmoomenu.css в директории www/modules/mod_hxdmoomenu / assets/ css/ .
Для начала меняем цвет меню,  для этого редактируем класс #hxdmoomenu ul, в нашем примере мы устанавливаем цвет фона белый:
#hxdmoomenu ul{
    margin: 0;
    padding: 0;
    background: #fff;
}
Для задания границы, высоты, отсутпов у пунктов меню редактируем класс #hxdmoomenu ul li.
Цвет ссылки модуль берет из стиля шаблона, если необходимо изменить цвет теста , то можно просто добавить строку color:#ваш_цвет в класс #hxdmoomenu ul li a (стр 81). Также в данном классе можно задать размер шрифта меню.  Для задания цвета при наведении мыши добавляем класс #hxdmoomenu ul li a:hover и указываем цвет. например
#hxdmoomenu ul li a:hover {
color:#00000;
}
Теперь зададим цвет активного пункта меню, добавим класс #hxdmoomenu ul li.active , например я хочу чтоб активный пункт меню выделялся серым цветом, получиться:
#hxdmoomenu ul li.active {
background:#CCCCCC;}
Изменяем цвет текста активного пункта меню, добавляем класс #hxdmoomenu ul li.active a . Например я хочу черный цвет текста меню, получиться:
#hxdmoomenu ul li.active a {
color:#000000;}
Цвет пункта меню при наведении. Допустим я хочу чтоб при наведении цвет пункта меню становился таким же серым как и активный пункт меню, для этого добавляю следующий класс:
#hxdmoomenu ul li:hover{
background:#CCCCCC;}
Таким образом Мы получили горизонтальное выпадающее меню: