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

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

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

• Выпадающее меню Joomla
• Как сделать выпадающее меню joomla?
• Создание выпадающего меню на сайте
• Установка модуля «ARI YUI Menu»
• Настройка модуля «ARI YUI Menu»
• Скачать русифицированный модуль выпадающего меню Joomla

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

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

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

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

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

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

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

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

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

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

После сообщения об успешной инсталляции модуля, необходимо перейти к настройке модуля «Расширения-Модули». Находим в списке модуль «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, в вашем случае он, скорее всего, будет отличаться.

#ariyui23.yui-skin-sam .yuimenu {
  z-index: 10;
}
#{$id}.yui-skin-sam .yuimenu .bd {
  border: 0;
}
#{$id}.yui-skin-sam .yuimenu li .bd {
  border: solid 1px #c8c8c8;
}
#{$id}.yui-skin-sam .yuimenu .yuimenu .bd {
	*zoom: normal;
}
#{$id}.yui-skin-sam .yuimenu ul {
	padding: 0 0 0 0;
}
#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {
	padding: 0 5px !important;
}

#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {
  height: 25px;
  line-height: 25px;
}

Смотрим что получилось, на мой взгляд, именно то, что я хотел. Горизонтальное выпадающее меню я не рассматриваю, вы сможете сделать это самостоятельно.

Если вы хотите редактировать непосредственно файл стиля модуля, он располагается тут JOOMLA_ROOT/modules/mod_ariyuimenu/js/assets/menu/sam/safe_menu.css

Для управления направлением вылета выпадающих блоков в настройках модуля есть строка "Выравнивание подменю [?]". Описание на страничке разработчика YUI гласит: Массив определения того, как подменю должно быть согласовано с родительским пунктом меню. Формат: [itemCorner, submenuCorner]. По умолчанию левый верхний угол подменю выравнивается в правом верхнем углу родительского пункта меню. Мой комментарий: Считайте что там по умолчанию написано tl,tr. Напишите туда то, что нужно вам.

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

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

В модуле автор не предусмотрел вывод атрибута title в ссылках пунктов меню и отображение иконок. Покопавшись в исходниках модуля, я добавил такую возможность. Для этого необходимо отредактировать файл JOOMLA_ROOT/modules/mod_ariyuimenu/tmpl/menu.php.

Найдите в файле следующую строку:

$aAttr = array(
	'class' => $hrefCssClass . ($isDisabled ? ' ' . $hrefDisabledCssClass : '') . ($isSelected ? ' ' . $hrefSelectedCssClass : '')
);

Сразу за ней вставьте следующие строки.

if (J1_6) {
	$menuItem->anchor_title = htmlspecialchars($menuItem->params->get('menu-anchor_title', ''), ENT_COMPAT, 'UTF-8', false);
	$menuItem->anchor_css   = htmlspecialchars($menuItem->params->get('menu-anchor_css', ''), ENT_COMPAT, 'UTF-8', false);
	$menuItem->menu_image   = $menuItem->params->get('menu_image', '') ? htmlspecialchars($menuItem->params->get('menu_image', ''), ENT_COMPAT, 'UTF-8', false) : '';
	if ($menuItem->anchor_css)   { $aAttr['class'] .= ' ' . $menuItem->anchor_css; }
	if ($menuItem->anchor_title) { $aAttr['title'] .= $menuItem->anchor_title; }
} else {
	/*$aAttr['title'] .= $menuItem->name; // Раскомментируйте для вывода хинтов*/
	$iParams = new JParameter($menuItem->params);
	if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
		$menuItem->menu_image = JURI::base(true).'/images/stories/'.$iParams->get('menu_image');
		$menuItem->title = $menuItem->alias;
	}
}

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

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

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

<a<?php echo AriHtmlHelper::getAttrStr($aAttr); ?>>
<?php
if ($menuItem->menu_image) echo '<img src="'.$menuItem->menu_image.'"' . ($menuItem->title ? ' alt="'.$menuItem->title.'"' : '') . ' />';
?>
<?php echo stripslashes(htmlspecialchars(J1_6 ? $menuItem->title : $menuItem->name)); ?></a>

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

Если высота изображения в 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

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

• 1
• 2
• 3
• 4
• 5