Логотип StingRay

Социальные сети
FacebookInstagramRSSTwitterYouTubeВ контактеОдноклассники
FacebookInstagramRSSTwitterYouTubeВ контактеОдноклассники
Силуэт человека

Несколько фокусов с CMS Joomla! Доработка горизонтального меню-списка для динамического разворачивания подпунктов


Доработка горизонтального меню-списка для динамического разворачивания подпунктов

Трудно было уместить полное объяснение сути данного трюка в заголовок, не делая его чрезмерно длинным. На самом же деле правильно было бы написать так: простая доработка штатного горизонтального меню в виде списка для динамического (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-функции, которая сначала прячет все меню второго уровня, а потом раскрывает то из них, по которому щёлкнул пользователь.

Добавьте свой комментарий или войдите, чтобы подписаться/отписаться.
OpenId
Предпросмотр
Улыбка Подмигивание Дразнит Оскал Смех Огорчение Сильное огорчение Шок Сумасшествие Равнодушие Молчание Крутизна Злость Бешенство Смущение Сожаление Влюблённость Ангел Демон Задумчивость Рука-лицо Не могу смотреть Жирный Курсив Подчёркивание Зачёркивание Размер шрифта Гиперссылка Цитата
Загрузка…