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

15 Апреля 2010г.

Сегодня рассмотрим как создать простое горизонтальное выпадающее меню на сайте под управлением 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. Больше в настройках ничего изменять не нужно

joomla выпадающее меню
Вот что получилось:

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

Настройка внешнего вида меню, правка 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;}

Таким образом Мы получили горизонтальное выпадающее меню:

 

 
Интересная статья? Поделись ей с другими:

Комментарии  

 
0 #13 27.02.2013 12:33
Проблему решил, заменил в файле hxdmoomenu.js "hidden" на "none", всё отображается корректно.

Очень хорошая статья, выручила, спасибо!
Цитировать
 
 
0 #12 26.11.2012 13:12
Спасибо, очень доходчиво!
Цитировать
 
 
0 #11 23.10.2011 12:12
Спасибо за материал. Меню установила и отредактировала . Проверила по страницам. Ок.
Но в одном месте система не довольна.
Когда я обращаюсь к "поиску" и задаю слово, появляется диагностика:
Notice: Trying to get property of non-object in …/maidano/public_html/components/com_jcomments/helpers/plugin.php on line 78. Вот эта строка: $pluginParams = new JParameter($plu gin->params);

Причем, текст plugin.php я сравнивала с текстом plugin.php из другого своего сайта, где не вносила никаких изменений. Тексты полностью совпадают. (Сначала ещё при обращении к «поиску» пропадало горизонтальное меню). Как это замечание убрать?
С уважением. М.
Цитировать
 
 
+1 #10 12.09.2011 13:21
Подскажите как сделать чтобы фон надписи стал прозрачным? Шаблон с рисунком а тут такая полоска по середине не красивая получается((( Спасибо.
Цитировать
 
 
0 #9 02.09.2011 15:09
Цитирую Дмитрий:
Поставил модуль, настроил, но почему-то не на всех страницах корректно отображается. На главной горизонтально, а ну других как обычное вертикальное меню.


Попробуй отключить кеширование в настройках модуля.
Цитировать
 
 
0 #8 28.08.2011 13:29
Почему когда добавляю шапка уезжает? Плиз
Цитировать
 
 
0 #7 07.08.2011 15:07
Поставил модуль, настроил, но почему-то не на всех страницах корректно отображается. На главной горизонтально, а ну других как обычное вертикальное меню.
Цитировать
 
 
+1 #6 14.04.2011 17:18
Спасибо автору все получилось
Цитировать
 
 
+2 #5 12.04.2011 13:29
а можно поподробнее о собственном выпадающем меню joomla
Цитировать
 
 
-13 #4 05.04.2011 01:56
Цитата:
А почему этот модуль горизонтально не отображается в експлорере?
Может что то где то надо поменять? подскажите плиз!



Просто руки кудрявые... не от туда растут !!!
Цитировать