1С-Битрикс: Как добавить свои классы в пункты меню
При работе с компонентом меню «1С-Битрикс: Управление сайтом» часто возникает необходимость присвоить отдельным его пунктам свои классы или вообще сделать эти пункты чем-то непохожими на остальные. К примеру, сделать так, чтобы некоторые открывались в отдельном окне. Рассмотрим, как это сделать.
В качестве подопытного экземпляра возьмем сайт «Мебельной компании», это один из самых простых дефолтных сайтов, которые идут в комплекте с «1С-Битрикс». Итак, у нас есть верхнее навигационное меню и две задачи:
- Добавить свой класс в пункт меню «Услуги».
- Сделать так, чтобы страница по клику на этом пункте открывалась в новой вкладке.
Для этого сначала внесем в содержимое меню необходимые изменения, а потом выведем эти изменения на сайт. И тут открывается первая и не самая приятная особенность. С фронтенда мы необходимых изменений внести никак не можем. Придется нам отправляться в административную панель. Переключимся в режим редактирования, наведем мышь на наше подопытное меню и кликнем по кнопке «Редактировать пункты меню» на всплывающей панели.
Теперь во всплывающем окне кликнем по ссылке «Редактировать меню в Панели управления».
Оказавшись в разделе редактирования меню в панели управления, перейдем в расширенный режим. Для этого кликнем по кнопке, которая так и называется — «Расширенный режим».
Прокрутим страницу до интересующего нас пункта меню «Услуги». Здесь нас интересуют поля в разделе «Параметры». В поле «Название» впишем, например, class, а в поле «Значение» впишем custom. Это в дальнейшем позволит нам добавить к пункту меню класс под названием custom. У вас название класса может быть любым из допустимых. Сделав это, нажмем кнопку «Применить» в нижней части страницы, чтобы добавить к нашему пункту меню еще один параметр.
После применения изменений и повторного открытия страницы редактирования видим, что появились поля для ввода второй пары параметров. Теперь оставим задел на то, чтобы наш пункт меню «Услуги» по клику открывал нужную страницу в новой вкладке. Для этого в поле «Название» второй группы полей впишем target, а в поле «Значение» впишем _blank. После этого окончательно и бесповоротно сохраним наше меню, нажав кнопку «Сохранить». Больше никаких правок в содержимое меню нам вносить не понадобится.
Вернемся на лицевую часть сайта и займемся редактированием шаблона компонента меню. Все нужные нам параметры сохранились в массиве меню. Чтобы вызвать нужный нам класс, используем выражение <?=$arItem["PARAMS"]["class"]?>, а за открытие страницы по ссылке в новой вкладке будет отвечает выражение <?=$arItem["PARAMS"]["target"]?>. Чтобы код был аккуратным и не плодил лишних сущностей, добавим проверку на существование данных параметров. Не будем вдаваться в детали дефолтного компонента меню в решении «Мебельная компания», обратим внимание лишь на те участки кода, которые выводят наш пункт меню. Найдем такой фрагмент.
<?if ($arItem["PERMISSION"] > "D"):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?else:?> ...
Созданный нами класс добавим в тег <li> (их здесь два: для неактивного и активного пункта меню), а атрибут, предписывающий браузеру открывать страницу по ссылке в новой вкладке, поместим в тег <a> (их тоже два для тех же случаев).
В принципе, в первом случае с <li> сработает вот такой вариант:
<li class="<?=$arItem["PARAMS"]["class"]?>">
Но этот вариант не очень хорош. В интересующем нас пункте система выведет вот такую конструкцию:
<li class="custom">
А в тех пунктах меню, для которых значение нашего параметра пустое, то есть во всех остальных, система вместо простого <li> покажет вот что:
<li class="">
Поскольку мы обещали не плодить лишних сущностей, то добавим проверку на существование значения для данного параметра. В первом случае вместо <li> добавим вот такую конструкцию:
<li<?if($arItem["PARAMS"]["class"]):?> class="<?=$arItem["PARAMS"]["class"]?>"<?endif?>>
Во втором случае в шаблоне уже идет проверка на то, активен данный пункт меню или неактивен:
<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>>
Поэтому необходимо расширить эту проверку и проверять уже две вещи: активность пункта меню и наличие собственного класса. Выглядеть это теперь будет так:
<li<?if($arItem["SELECTED"] || $arItem["PARAMS"]["class"]):?> class="<?if($arItem["SELECTED"]):?>item-selected<?endif?><?if($arItem["PARAMS"]["class"]):?> <?=$arItem["PARAMS"]["class"]?><?endif?>"<?endif?>>
В случае с атрибутом target, который добавляется в тег ссылки <a> и предписывает браузеру, как эту ссылку открывать, сложных проверок нам не потребуется, потому что на наличие этого атрибута проверка в дефолтном шаблоне не предусмотрена.
Поэтому нам достаточно дополнить ссылки вот таким выражением:
<?if($arItem["PARAMS"]["target"]):?> target="<?=$arItem["PARAMS"]["target"]?>"<?endif?>
В итоге рассмотренный выше участок шаблона будет выглядеть следующим образом:
<?if ($arItem["PERMISSION"] > "D"):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li<?if($arItem["PARAMS"]["class"]):?> class="<?=$arItem["PARAMS"]["class"]?>"<?endif?>><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"<?if($arItem["PARAMS"]["target"]):?> target="<?=$arItem["PARAMS"]["target"]?>"<?endif?>><?=$arItem["TEXT"]?></a></li> <?else:?> <li<?if($arItem["SELECTED"] || $arItem["PARAMS"]["class"]):?> class="<?if($arItem["SELECTED"]):?>item-selected<?endif?><?if($arItem["PARAMS"]["class"]):?> <?=$arItem["PARAMS"]["class"]?><?endif?>"<?endif?>><a href="<?=$arItem["LINK"]?>"<?if($arItem["PARAMS"]["target"]):?> target="<?=$arItem["PARAMS"]["target"]?>"<?endif?>><?=$arItem["TEXT"]?></a></li> <?endif?> <?else:?> ...
Осталось дело за малым. Внесем какие-нибудь изменения в таблицу стилей компонента и увидим, что наш новый класс для пункта меню функционирует нормально.
Допишем в CSS, например, такое выражение:
.custom {
font-size: 18px;
line-height: 12px;
}
Как видим, наш класс благополучно принялся и готов к дальнейшей кастомизации.