Волгоград, ул. Ленина 9, оф. 41

+7 (8442) 56-39-40

1С-Битрикс: Как добавить свои классы в пункты меню


04.12.2019

1С-Битрикс: Как добавить свои классы в пункты меню

При работе с компонентом меню «1С-Битрикс: Управление сайтом» часто возникает необходимость присвоить отдельным его пунктам свои классы или вообще сделать эти пункты чем-то непохожими на остальные. К примеру, сделать так, чтобы некоторые открывались в отдельном окне. Рассмотрим, как это сделать.

В качестве подопытного экземпляра возьмем сайт «Мебельной компании», это один из самых простых дефолтных сайтов, которые идут в комплекте с «1С-Битрикс». Итак, у нас есть верхнее навигационное меню и две задачи:

  1. Добавить свой класс в пункт меню «Услуги».
  2. Сделать так, чтобы страница по клику на этом пункте открывалась в новой вкладке.

1С-Битрикс: Как добавить свои классы в пункты меню

Для этого сначала внесем в содержимое меню необходимые изменения, а потом выведем эти изменения на сайт. И тут открывается первая и не самая приятная особенность. С фронтенда мы необходимых изменений внести никак не можем. Придется нам отправляться в административную панель. Переключимся в режим редактирования, наведем мышь на наше подопытное меню и кликнем по кнопке «Редактировать пункты меню» на всплывающей панели.

1С-Битрикс: Как добавить свои классы в пункты меню

Теперь во всплывающем окне кликнем по ссылке «Редактировать меню в Панели управления».

1С-Битрикс: Как добавить свои классы в пункты меню

Оказавшись в разделе редактирования меню в панели управления, перейдем в расширенный режим. Для этого кликнем по кнопке, которая так и называется — «Расширенный режим».

1С-Битрикс: Как добавить свои классы в пункты меню

Прокрутим страницу до интересующего нас пункта меню «Услуги». Здесь нас интересуют поля в разделе «Параметры». В поле «Название» впишем, например, class, а в поле «Значение» впишем custom. Это в дальнейшем позволит нам добавить к пункту меню класс под названием custom. У вас название класса может быть любым из допустимых. Сделав это, нажмем кнопку «Применить» в нижней части страницы, чтобы добавить к нашему пункту меню еще один параметр.

1С-Битрикс: Как добавить свои классы в пункты меню

После применения изменений и повторного открытия страницы редактирования видим, что появились поля для ввода второй пары параметров. Теперь оставим задел на то, чтобы наш пункт меню «Услуги» по клику открывал нужную страницу в новой вкладке. Для этого в поле «Название» второй группы полей впишем target, а в поле «Значение» впишем _blank. После этого окончательно и бесповоротно сохраним наше меню, нажав кнопку «Сохранить». Больше никаких правок в содержимое меню нам вносить не понадобится.

1С-Битрикс: Как добавить свои классы в пункты меню

Вернемся на лицевую часть сайта и займемся редактированием шаблона компонента меню. Все нужные нам параметры сохранились в массиве меню. Чтобы вызвать нужный нам класс, используем выражение <?=$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:?>
...

Осталось дело за малым. Внесем какие-нибудь изменения в таблицу стилей компонента и увидим, что наш новый класс для пункта меню функционирует нормально.

1С-Битрикс: Как добавить свои классы в пункты меню

Допишем в CSS, например, такое выражение:

.custom {
	font-size: 18px;
	line-height: 12px;
}

1С-Битрикс: Как добавить свои классы в пункты меню

Как видим, наш класс благополучно принялся и готов к дальнейшей кастомизации.


Возврат к списку