Пример редактирования шаблона на основе компонента меню

Выделите в HTML-верстке код, отвечающий за показ верхнего меню. Например:

<div class="topmenu">
	<ul class="topmenu">
		<li><a href="#" class="first">На главную</a></li>
		<li><a href="#">Новости</a></li>
		<li><a href="#" class="selected">Магазины</a></li>
		<li><a href="#">Книги</a></li>
		<li><a href="#">Форум</a></li>
		<li><a href="#">О компании</a></li>
		<li><a href="#">О Контакты</a></li>
	</ul>
</div>

В этом коде пункты меню представлены в виде списка, который обладает следующими нюансами:

• У первого пункта меню должен быть указан стиль first;
• У выделенного пункта меню должен быть указан стиль selected;
• Меню является одноуровневым.

Модифицировать будем код шаблона gray-tabs-menu. Скопируйте шаблон в собственное пространство имен и откройте его для редактирования.

Редактирование шаблона можно проводить как в форме Bitrix Framework, так и копированием кода и правкой его в другом редакторе. Использовать другой редактор удобнее в случае объемных текстов, так как форма редактирования в Bitrix Framework не поддерживает цветовое выделение тегов. Для примера используйте Notepad++.

Код меню для этого шаблона выглядит так:

1 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
2
3 <?if (!empty($arResult)):?>
4 <div class="gray-tabs-menu">
5	<ul>
6 <?foreach($arResult as $arItem):?>
7
8   <?if ($arItem["PERMISSION"] > "D"):?>
9	<li><a href="<?=$arItem["LINK"]?>"><nobr><?=$arItem["TEXT"]?></nobr></a>
10	<?endif?>
11
12 <?endforeach?>
13
14	</ul>
15</div>
16<div class="menu-clear-left"></div>
17<?endif?>

Рассмотрим каждую строчку этого шаблона:

Таким образом, шаблон меню содержит:

• область пролога шаблона меню;
• область тела шаблона меню (вывод повторяющихся элементов);
• область эпилога шаблона меню.

После адаптации шаблон примет вид (зеленым цветом выделены изменения):

1 <?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
2
3 <?if (!empty($arResult)):?>
4 <div class="topmenu">
5	<ul class="topmenu">
5a <? $cnt=0; ?>
6 <?foreach($arResult as $arItem):?>
7
8   <?if ($arItem["PERMISSION"] > "D"):?>
8a   <?if ($arItem["SELECTED"]): ?>
8b	<li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
8c   <?else:?>
8d        <?if ($cnt==0):?>
8e	<li><a href="<?=$arItem["LINK"]?>" class="first"><?=$arItem["TEXT"]?></a></li>
8f        <?else:?>
9	<li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
10a	<?endif?>
10b   <?endif?>
10c <?$cnt++; ?>
10 <?endif?>
11
12 <?endforeach?>
13
14	</ul>
15</div>
16
17<?endif?>

Итак, что мы сделали?

• В строках 4,5 заменили стили у блока и у списка.
• В строке 5а ввели переменную $cnt с единственной целью – отследить первый элемент списка – в верстке он задается другим стилем. Эта переменная используется в строке 8d в строке 10c.
• В строках 8-10 добавили условие проверки активного пункта меню и первого пункта меню.
• И, наконец, удалили специфику верстки из 16 строки.
• Кроме того, у нас нет необходимости в специализированных стилях и картинках для этого шаблона. Поэтому нужно удалить из каталога /bitrix/templates/.default/components/menu/top_menu/ файл style.css и папку /images/.