Блог разработчиков

Создание аккордеон меню для Joomla 1.5

26 февраля 2013

Для реализации этой задачи нам понадобится стандартный модуль меню mod_mainmenu и два js-скрипта. Итак начнем.

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

  

 

После выполненных настроек обратимся в файлу отвечающему за параметры вывода нашего вертикального меню. Откройте файл /modules/mod_mainmenu/legacy.php в любом удобном для вас редакторе кода. В этом файле следует внести некоторые изменения.

В первую очередь давайте избавимся от изображений подпунктов меню загружаемых по умолчанию. Найдите в файле:

$img[$i] = '<img src="' . $imgpath . '/indent' . $i . '.png" alt="" />';

Заменяем на:

$img[$i] = '';

 

 Следующим шагом немного поправим шаблон вывода меню. Найдите в том же файле:

              	array (
			'<table width="100%" border="0" cellpadding="0" cellspacing="0">',
			'<tr ><td>',
			'</td></tr>',
			'</table>'
		),
		array (
			'',
			'<div style="padding-left: 4px">' . $img[1],
			'</div>',
			''
		),

И замените на:

                array (
			'<div id="accordion">',
			'',
			'',
			'</div>'
		),
		array (
			'<div>',
			'' . $img[1],
			'',
			'</div>'
		),

Сохраните произведенные изменения.

Далее нам понадобятся два скрипта обеспечивающих работу аккордиона, jquery-1.7.1.js и jquery-ui.js. Создайте новую папку в корне сайта с заголовком "js" и сохраните эти файлы там.

Данные файлы мы прикрутим к нашему действующему шаблону. Откройте файл /templates/название_вашего_шаблона/index.php и сразу перед:

<jdoc:include type="head" />

 добавьте код:

<script type="text/javascript" src="<?php echo $this->baseurl ?>/js/jquery-1.7.1.js"></script>
<script src="<?php echo $this->baseurl ?>/js/jquery-ui.js"></script>
<script>
  jQuery(function() {
    jQuery( "#accordion" ).accordion({
      collapsible: true,
      heightStyle: "content",
      active: "#active_menu"
    });
  });
  </script>

Теперь скрипт выполняет свою функцию аккордеона. Для упрощения задачи в стилевом управлении подцепите файл jquery-ui-1.9.2.custom.css. Для этого скаченный файл сохраните во вновь созданную папку "css" и вставьте в файл /templates/название_вашего_шаблона/index.php в любом месте следующий код:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/css/jquery-ui-1.9.2.custom.css" type="text/css" />

Вот и все, двухуровневое аккордеон меню готово. Для изменения стиля правьте файл jquery-ui-1.9.2.custom.css.

Пример работы подобного меню вы можете посмотреть на одном из наших сайтов.