Добавляем верхнее меню для 1С-Битрикс подробно

Кастомизируем шаблон компонента 1С-Битрикс “Меню”

Если Вы создаете какое-либо меню для 1С-Битрикс “Управление сайтом”, то для начала необходимо просто “сверстать” тот вид меню, которое Вы задумали и самое главное – правильно создать файл с каскадными таблицами стилей CSS (Cascading Style Sheets). В данном примере я не буду вдаваться в тонкости верстки меню и создания CSS файлов, т.к. для этого потребуется сделать еще один огромный раздел, а может быть и сайт.

В интернете можно найти много примеров меню на CSS, можно даже при определенной сноровке (я к сожалению где-то потерял эту ссылку) найти CSS Menu Builder, который абсолютно бесплатно выдаст Вам и html и CSS код к Вашему меню.

Для меню, которое будет сделано в этом примере CSS файл можно скачать по этой ссылке.

Когда раздел посвященный созданию своего шаблона для 1С-Битрикс будет закончен, я обязательно дам ссылку, откуда можно будет совершенно бесплатно скачать весь готовый шаблон со всеми компонентами, которые в нем будут применены.

Итак, CSS файл к меню у нас есть, займемся кастомизацией шаблона компонента “Меню” для чего перейдем к папке /www/ bitrix/ templates/ название_вашего_шаблона/ components/ bitrix/ menu/ my_top_menu_01/ (рисунок 10). Файл >> style.css <<, в котором содержится CSS код к “стандартному” меню 1С-Битрикс и папку >> images << в которой находятся графические элементы меню – можете смело удалить, т.к. они нам больше не понадобятся. На место удаленного файла style.css, поместим style.css файл из скачанного фрхива.

После этого откроем файл, в котором находится описание для меню – >> .description.php <<

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$arTemplateDescription = array(
"NAME" => GetMessage("MENU_DOT_DEFAULT_NAME"),
"DESCRIPTION" => GetMessage("MENU_DOT_DEFAULT_DESC"),
);
?>

Сразу отмечу, что содержимое этого файла на работу меню никакого влияния не оказывает. MENU_DOT_DEFAULT_NAME – название меню, а MENU_DOT_DEFAULT_DESC – это его описание. В соответствии с этим заполним эти поля:

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();

$arTemplateDescription = array(
"NAME" => GetMessage("Верхнее меню"),
"DESCRIPTION" => GetMessage("Главное одноуровневое верхнее меню сайта"),
);
?>

Откроем файл с “шаблоном” компонента меню 1С-Битрикс >> template.php <<.

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<? if (!empty($arResult)):?>
<ul class="left-menu">
<? foreach($arResult as $arItem):?>
<? if($arItem["SELECTED"]):?>
<li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
<? else:?>
<li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
<? endif?>

<? endforeach?>
</ul>
<? endif?>

Первое, что можно заметить – в шаблоне этого меню отсутствует проверка на права доступа, придется этот недостаток исправить, добавив необходимую проверку.

В результате кастомизации php и html кода компонента 1С-Битрикс меню мы получим следующий код:

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<? if (!empty($arResult)):?>
<ul>
<?
$frst_item = true;
$item = 0;
foreach($arResult as $arItem) {
if ($arItem["SELECTED"]) { $item += 1;}
}
foreach($arResult as $arItem):?>
<? if ($arItem["PERMISSION"] > "D"): // Начало проверки прав доступа?>
<?php if ($frst_item):?>
<li><a title="На страницу <?=$arItem["TEXT"]?>" <? if ($arItem["SELECTED"] && $item <= 1) {echo 'class="selected" ';} ?>href="<?=$arItem["LINK"]?>"><em><?=$arItem["TEXT"]?></em></a></li>
<?php $frst_item = false;?>
<? else:?>
<li><a title="На страницу <?=$arItem["TEXT"]?>" <? if($arItem["SELECTED"]) {echo 'class="selected" ';}?> href="<?=$arItem["LINK"]?>"><em><?=$arItem["TEXT"]?></em></a></li>
<? endif; ?>
<? endif; // Конец проверки прав доступа?>
<? endforeach?>
</ul>
<? endif?>

Сохраним доработанный файл с “шаблоном” компонента меню 1С-Битрикс >> template.php <<.

Количество показов: 2123