Заказать звонок
Заказ обратного звонка

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


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

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

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

2015-11-24 16-16-41 Скриншот экрана  2015-11-24 16-19-14 Скриншот экрана  2015-11-24 16-20-01 Скриншот экрана

Такое меню используется довольно часто, поэтому мы решили написать инструкцию, как сделать аккордеон меню для 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();

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

 

 

 

Правильный robots.txt для SimplaCMS Мы стали партнерами OkayCMS

Комментарии

Пока нет комментариев

Оставить комментарий