Пример. Редактирование шаблона меню

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

Выделите в 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.	Проверка, вызван ли этот файл напрямую или нет. Если напрямую – прекратить работу.		3.	Если массив с пунктами меню $arResult не пуст, то выполнять дальнейшие действия		4,5.	Внешний блок и начало списка пунктов меню		6.	Цикл по массиву с пунктами меню. В $arItem – текущий элемент цикла.

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

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

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

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/.

Внимание! Вы можете использовать стили компонента и каталог шаблона компонента для хранения стилей и дополнительных файлов. Это позволит вам переносить шаблон компонента между проектами.