Выпадающее меню Joomla

Информация о материале

Выпадающее меню Joomla

 

Выпадающее меню Joomla

Выпадающее меню сайта позволит вам иметь дружественный интерфейс и избавит от излишнего загромождения.

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

Как сделать выпадающее меню joomla?

Прежде всего, необходимо понимать, что меню выводится в позиции для вывода модулей. Следовательно, необходим модуль меню с выпадающим списком. Немного покопавшись в поисковиках на эту тему и опробовав некие варианты, я наткнулся на модуль слайд меню для joomla - «ARI YUI Menu». Этот модуль позволяет создать вертикальное и горизонтальное выпадающее меню, имеет минимум настроек, совместим с joomla 1.5, 2.5. В его основу положена свободно распространяемая библиотека «YUI Library» от команды разработчиков Yahoo.

Создание выпадающего меню на сайте

Прежде всего, необходимо создать саму структуру будущего меню с необходимой иерархией. Это делается так же, как и для стандартного меню. Рассмотрим небольшой пример с живого сайта.

 

На рисунке видно, что основными пунктами меню являются: Трубы, Фитинги, НСПС и Сварочное оборудование - это элементы первого уровня. Пункты Трубы и Фитинги имеют дочерние элементы – элементы второго уровня: Газопроводные трубы, Водопроводные трубы... Пункт меню Канализационные фитинги так же имеет дочерние элементы – элементы третьего уровня.

Как сделать пункт меню дочерним? Да очень просто, при создании пункта меню или в режиме его редактирования указать для него «Родительский элемент». В ниже следующем примере сказано, что пункт меню «Газопроводные трубы» является дочерним по отношению к пункту меню «Трубы». Аналогичным образом строится иерархия для всех остальных пунктов.

Для Joomla 2.5 иерархия строится аналогичным образом, как это делается описано в статье

Установка модуля «ARI YUI Menu»

Скачать модуль «ARI YUI Menu» для joomla можно на сайте автора, там же есть и демонстрационная страница www.demo2.ari-soft.com/ari-yui-menu.html 

Процесс установки стандартный, в административной панели «расширения-установка и удаление», выбираем скаченный файл модуля и нажимаем кнопку «Установить».

После сообщения об успешной инсталляции модуля, необходимо перейти к настройке модуля «Расширения-Модули». Находим в списке модуль «ARI YUI Menu» и нажав на ссылку оказываемся в странице настроек.

Настройка модуля «ARI YUI Menu»

Вкладка «Подробности»

  • смените заголовок
  • проверьте что модуль включен
  • выберите позицию вывода модуля.

Вкладка «Настройки»

  • выберите меню, которое хотите сделать выпадающим
  • введите суффикс класса модуля меню, это пригодится для изменения стиля
  • по вкусу снимите подсветку активного пункта меню
  • выберите тип вертикальное выпадающее меню.
    • Далее отключите модуль стандартного отображения меню, не забыв его переименовать во избежание путаницы, а можете просто удалить совсем.
      • Теперь посмотрим, что у нас получилось.
        • Согласитесь, не совсем красиво, необходимо убирать бордюр, убирать ненужные, уменьшить огромные отступы, увеличить высоту пунктов выпадающего меню. Про вылезающие звездочки голосования вообще молчу. Правим CSS. Обратите внимание на ID модуля, в моем случае id=87 (для Joomla 2.5) и id=23 (для Joomla 1.5).
        • Введите в поле Стиля CSS свои изменения. Обратите внимание, на #ariyui23. Число 23 в данном месте должно соответствовать id модуля. Если нет особой необходимости в указании ID модуля, необходимо использовать предопределенную переменную {$id} вместо #ariyui23, я показал способ по id модуля лишь для наглядности.
          • Мой CSS для модуля ARI YUI Menu, в вашем случае он, скорее всего, будет отличаться.
          • 01.#ariyui23.yui-skin-sam .yuimenu {
          • 02.z-index: 10;
          • 03.}
          • 04.#{$id}.yui-skin-sam .yuimenu .bd {
          • 05.border: 0;
          • 06.}
          • 07.#{$id}.yui-skin-sam .yuimenu li .bd {
          • 08.border: solid 1px #c8c8c8;
          • 09.}
          • 10.#{$id}.yui-skin-sam .yuimenu .yuimenu .bd {
          • 11.*zoom: normal;
          • 12.}
          • 13.#{$id}.yui-skin-sam .yuimenu ul {
          • 14.padding: 0 0 0 0;
          • 15.}
          • 16.#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {
          • 17.padding: 0 5px !important;
          • 18.}
          • 19. 
          • 20.#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {
          • 21.height: 25px;
          • 22.line-height: 25px;
          • 23.}
            • Смотрим что получилось, на мой взгляд, именно то, что я хотел. Горизонтальное выпадающее меню я не рассматриваю, вы сможете сделать это самостоятельно.
              • Если вы хотите редактировать непосредственно файл стиля модуля, он располагается тутJOOMLA_ROOT/modules/mod_ariyuimenu/js/assets/menu/sam/safe_menu.css
              • Для управления направлением вылета выпадающих блоков в настройках модуля есть строка "Выравнивание подменю [?]". Описание на страничке разработчика YUI гласит:Массив определения того, как подменю должно быть согласовано с родительским пунктом меню. Формат: [itemCorner, submenuCorner]. По умолчанию левый верхний угол подменю выравнивается в правом верхнем углу родительского пункта меню. Мой комментарий: Считайте что там по умолчанию написано tl,tr. Напишите туда то, что нужно вам.
              • В модуле автор не предусмотрел вывод атрибута title в ссылках пунктов меню и отображение иконок. Покопавшись в исходниках модуля, я добавил такую возможность. Для этого необходимо отредактировать файл JOOMLA_ROOT/modules/mod_ariyuimenu/tmpl/menu.php.
              • Найдите в файле следующую строку:
              • 1.$aAttr = array(
              • 2.'class' => $hrefCssClass . ($isDisabled ? ' ' . $hrefDisabledCssClass : '') . ($isSelected ? ' ' .$hrefSelectedCssClass : '')
              • 3.);
                • Сразу за ней вставьте следующие строки.
                • 01.if (J1_6) {
                • 02.$menuItem->anchor_title = htmlspecialchars($menuItem->params->get('menu-anchor_title', ''), ENT_COMPAT, 'UTF-8', false);
                • 03.$menuItem->anchor_css   = htmlspecialchars($menuItem->params->get('menu-anchor_css', ''), ENT_COMPAT, 'UTF-8', false);
                • 04.$menuItem->menu_image   = $menuItem->params->get('menu_image', '') ? htmlspecialchars($menuItem->params->get('menu_image', ''), ENT_COMPAT, 'UTF-8', false) : '';
                • 05.if ($menuItem->anchor_css)   { $aAttr['class'] .= ' ' . $menuItem->anchor_css; }
                • 06.if ($menuItem->anchor_title) { $aAttr['title'] .=$menuItem->anchor_title; }
                • 07.} else {
                • 08./*$aAttr['title'] .= $menuItem->name; // Раскомментируйте для вывода хинтов*/
                • 09.$iParams = new JParameter($menuItem->params);
                • 10.if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
                • 11.$menuItem->menu_image = JURI::base(true).'/images/stories/'.$iParams->get('menu_image');
                • 12.$menuItem->title = $menuItem->alias;
                • 13.}
                • 14.}
·        

·         Ответы на часто задаваемые вопросы

·         Как добавить атрибуты title в ссылки и иконки пунктов меню?

Далее найдите строку:

1.<a<?php echo AriHtmlHelper::getAttrStr($aAttr); ?>><?php echo stripslashes(htmlspecialchars(J1_6 ? $menuItem->title : $menuItem->name)); ?></a>

Замените ее на:

1.<a<?php echo AriHtmlHelper::getAttrStr($aAttr); ?>>

2.<?php

3.if ($menuItem->menu_image) echo '<img src="'.$menuItem->menu_image.'"' . ($menuItem->title ? ' alt="'.$menuItem->title.'"' : '') . ' />';

4.?>

5.<?php echo stripslashes(htmlspecialchars(J1_6 ? $menuItem->title : $menuItem->name)); ?></a>

 

Загрузить файл с изменениями можно в конце статьи.

В CSS модуля необходимо добавить код для выравнивания текста относительно иконок
#{$id}.yui-skin-sam ul li a img { vertical-align: middle; margin-top: -2px; }

Если высота изображения в px меньше или равна font-size * 1,5, или его нет
#{$id}.yui-skin-sam UL LI.yuimenuitem { min-height: Xpx; padding-top: Ypx; }
X = varint( font-size * 2 - font-size / 4 )
Y = varint( font-size / 4 )

Как поменять курсор меню?

// Горизонтальное меню
#{$id}.yui-skin-sam UL LI A.yuimenubaritemlabel:hover { cursor: pointer; }

// Вертикальное меню
#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel:hover { cursor: pointer; }

Как поменять цвет пункта меню над которым курсор мыши?

// Горизонтальное меню
#{$id}.yui-skin-sam .yuimenubar { background: none; }
#{$id}.yui-skin-sam .yuimenubaritem-selected, #{$id}.yui-skin-sam .yuimenubaritem-active { background: none; }
#{$id}.yui-skin-sam ul li.yuimenubaritem-selected, #{$id}.yui-skin-sam ul li.yuimenubaritem-active { background-color: red; }

// Вертикальное меню
#{$id}.yui-skin-sam ul li.yuimenuitem-selected, #{$id}.yui-skin-sam ul li.yuimenuitem-active { background-color: red; }

Как поменять название и цвет шрифта?

// Горизонтальное меню
#{$id}.yui-skin-sam .yuimenubar ul li a { font-family: Times New Roman; color: blue; }
#{$id}.yui-skin-sam ul li a.yuimenubaritemlabel, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:link, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:visited, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:hover { color: blue; }

// Вертикальное меню
#{$id}.yui-skin-sam .yuimenu ul li a { color: blue; font-family: Times New Roman; }

Как вывести текст пункта меню в несколько строк?

#{$id} .yuimenuitemlabel, #{$id} .yuimenubaritemlabel {white-space: normal;}
#{$id}.yui-skin-sam UL LI.yuimenuitem { min-height: 25px; padding-top: 6px; }
где padding-top = varint( ( min-height - font-size ) / 2 )

"Стрелочка-треугольничек" наезжает на текст, как отодвинуть?

#{$id}.yui-skin-sam li.yuimenuitem-hassubmenu { padding-right: 15px; }
#{$id}.yui-skin-sam ul li a.yuimenuitemlabel { border-bottom: 0px; }
#{$id}.yui-skin-sam li.yuimenuitem { border-bottom: 1px solid #00f; }

Как поменять цвет бордюра?

#{$id}.yui-skin-sam li.yuimenuitem { border-bottom: 1px solid #00f; }
#{$id}.yui-skin-sam .yuimenu li .bd { border: solid 1px #00f; border-bottom: 0; }

Как поменять цвет фона?

._menu { background-color: grey; }
#{$id}.yui-skin-sam .yuimenu .bd { background-color: grey; }

Как направить выпадение пунктов меню влево, а не вправо?

В настройках модуля есть опция «Выравнивание подменю [?]» Если кликнуть по значку-ссылке знаку вопроса - вы попадете на страничку с описанием выравнивания разработчика YUI.

Эта опция представляет собою массив определения того, как подменю должно быть согласовано с родительским пунктом меню.

  • Формат: [itemCorner, submenuCorner]
  • Значения: ["tr","tl"] , ["tl","bl"]

По умолчанию левый верхний угол подменю выравнивается в правом верхнем углу родительского пункта меню.

Комментарий от меня: Считайте что там по умолчанию написано tl,tr (сокращения top, bottom, left, right). Напишите туда то, что нужно вам.

Скачать русифицированный модуль выпадающего меню для joomla

В состав модуля входят переводы на иврит, словацкий, мне захотелось сделать русскую версию модуля, мы же не хуже. Надеюсь, модуль понравится и вам.

Скачать для пользования
Модуль меню ARI Ext Menu – русифицированная версия