Несколько фокусов с CMS Joomla! Доработка горизонтального меню-списка для динамического разворачивания подпунктов
- Опубликовано: 25.02.2017
- Автогенерация и отображение эскизов фотоальбомов модулем RokBox
- Доработка горизонтального меню-списка для динамического разворачивания подпунктов
- Единая кнопка «Сохранить изменения» для корзины Интернет-магазина VirtueMart
- Изменение/снятие ограничений на длину строки поиска и его попутная доработка
- Исправление ссылки на главную/домашнюю в горизонтальном меню старого стиля
- Модернизация сайтов на Joomla! старых версий 1.5/2.5 до актуальной 3.6
- Отображение заглушки «сайт в разработке» для всех и всего сайта для избранных
- Подсветка пункта меню типа «внешняя ссылка», или Как сделать ссылки на категории VirtueMart
- Преобразование адресов сайта в дружественные (SEF) для внешних нужд
- Реализация двуязычного сайта с постраничным переключением языков
- Удаление значка печати из списка статей при сохранении его на странице статьи
Доработка горизонтального меню-списка для динамического разворачивания подпунктов
Трудно было уместить полное объяснение сути данного трюка в заголовок, не делая его чрезмерно длинным. На самом же деле правильно было бы написать так: простая доработка штатного горизонтального меню в виде списка для динамического (JavaScript) разворачивания подпунктов. Дело в том, что в одном из своих freelance-проектов я столкнулся вот с какой задачей: надо было осуществить миграцию веб-сайта с самодельного движка (CMS) на Joomla с максимальным сохранением внешнего вида. Одним из элементов интерфейса этого сайта было вертикальное меню в виде двухуровневого списка, в котором меню второго уровня разворачивались посредством JavaScript на стороне клиента, то есть без перезагрузки всей страницы.
«Ерунда, а не проблема», – скажут иные искушённые веб-разработчики, – «в Сети полно готовых выпадающих меню и даже генераторов оных». Согласен, это действительно так. Однако в моём случае меню-список был донельзя простым, а привести к такому виду все предлагаемые раскрасивые меню оказалось задачей более сложной, чем доработать штатное вертикальное меню Joomla.
Итак, в Joomla это должно быть обычное двухуровневое вертикальное меню в виде списка («Менеджер модулей» > меню > «Стиль меню» = «Список»), которому необходимо присвоить идентификатор, например, leftMenu (там же, «Id меню» = “leftMenu”). После этого в таблице стилей прописать, что элементы списка второго уровня по умолчанию невидимы:
.leftMenu ul li ul
{
display: none;
}
При создании этого меню в менеджере меню нужно сделать так, чтобы те пункты меню первого уровня, которые будут иметь выпадающее меню второго уровня, были типа «внешняя ссылка» и указывали на пустой якорь (#). Это делается для того, чтобы щелчок по ним приводил не к переходу по ссылке, а к выполнению JavaScript-обработчика, разворачивающего меню второго уровня:
<jdoc:include type="modules" name="leftmenu" />
<script><!--
function showSubmenu(parentMenuClassName)
{
var leftMenu = document.getElementById('leftMenu');
var i = 0;
for (i=0; i<leftMenu.childNodes.length; i++)
if (leftMenu.childNodes[i].className == parentMenuClassName)
{
var subMenu = leftMenu.childNodes[i].childNodes[1];
break;
};
var currentDisplay = subMenu.style.display;
var subMenus = document.getElementById('leftMenu').getElementsByTagName('ul');
for (i=0; i<subMenus.length; i++)
subMenus[i].style.display = 'none';
if (currentDisplay == 'block')
subMenu.style.display = 'none'
else
subMenu.style.display = 'block';
};
var leftMenu = document.getElementById('leftMenu').childNodes;
for (var i=0;i<leftMenu.length;i++)
if (leftMenu[i].className.substr(0,7) == 'parent ')
leftMenu[i].firstChild.href = 'javascript:showSubmenu(\''+leftMenu[i].className+'\');';
--></script>
Тут ранее указанный в качестве ссылки пустой якорь подменяется (leftMenu[i].firstChild.href = …) на вызов JavaScript-функции, которая сначала прячет все меню второго уровня, а потом раскрывает то из них, по которому щёлкнул пользователь.