Аккордеон меню для SimplaCMS

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

Но сначала немного о том, что это такое вообще.

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

Такое меню используется довольно часто, поэтому мы решили написать инструкцию, как сделать аккордеон меню для SimplaCMS самостоятельно.

Инструкция написана для стандартного шаблона SimplaCMS, если вы уже вносили изменения в ваш шаблон ранее – будьте внимательны и аккуратны. Постарайтесь понять, что вы делаете.

Первое что нужно будет сделать, это построить правильную разметку категорий, для этого применим станадратную функцию Smarty с некоторыми изменениями

<div id="catalog_menu">	
{function name=categories_tree}
{if $categories}
	<ul>
		{foreach $categories as $c}
			{if $c->visible}
				<li>
					<a class="{if $c->children|count > 1}switch{/if}{if $category->id == $c->id} selected{/if}" href="catalog/{$c->urldata-category="{$c->id}">{$c->name|escape}</a>
					{if $c->children|count > 1}
						<div class="submenu">
						{categories_tree categories=$c->subcategories}
						</div>
					{/if}
				</li>
			{/if}
		{/foreach}
	</ul>
{/if}
{/function}
{categories_tree categories=$categories}
</div>

Важно: Данный код необходимо размещать в тот файл с расширением tpl где у Вас отображается меню каталога. (Обычно это index.tpl в более редких случаях это файлы  названием left.tpl или sidebar.tpl)

В данном блоке используется проверка на начилие подкатегорий ( {if $c->children|count > 1}) и добавляется также класс switch по которому подключается нужная Вам иконка, по которой будет щелкать пользователь для раскрытия категорий.

Далее применяем стили, которые необходимы для корректного отображения категорий

	      .submenu {display: none;}
	      .active> .submenu {display: block;}
				

 После того как все подготовлено, пишем скрипт который будет выполнять механизм сворачивания/разворачивания категорий. Скрипт нужно размещать в том месте, где у Вас выводятся категории. Это либо index.tpl либо лучше всего размещать данный скрипт в файл script.js который обычно располагается в папке js  с названием темы.

	$('#catalog_menu .switch').click(function(){
		/* Скрываем все подменю текущего уровня */
		$(this).closest('ul').find('.submenu').slideUp();
		
		/* Открываем нужное нам подменю */
		$(this).closest('li').children('.submenu').slideDown();
		
		/* Если нужно дополнительно стилизировать */
		$(this).closest('ul').find('.switch').removeClass('active');
		$(this).addClass('active');
						
	});
				
	/* Подменю раскрыто по умолчанию, если находимся в нем. 
	   Для адаптивных сайтов лучше заменять show() на addClass('some_class') */
	$('#catalog_menu .submenu a.selected').parents('.submenu').show();

Надеемся, что данная инструкция поможет вам немного обновить сайт.
А если не получится, мы всегда готовы вам помочь :).