Перейти к содержанию

Примеры создания меню

Предварительные операции

Для примера мы создадим в структуре сайта новый раздел test_menu, который также добавим в главное меню.

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

В параметрах компонента, для примера, в опции Тип меню для первого уровня укажем Главное меню.

Примечание: По умолчанию этот компонент уже настроен для вывода Меню раздела, поэтому операция по созданию меню и его настройка будет пропущена.

Древовидное меню

Древовидное меню – самое распространенное. Оно достаточно простое и вместе с этим информативное. Создается на базе статических и динамических элементов: разделов, страниц и инфоблоков.

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

Одноуровневое древовидное меню

Задача: создать древовидное меню.

  • Создайте дополнительный тип меню: Подменю (podmenu).
  • В параметрах компонента установите следующие параметры:
  • Шаблон компонента - tree (Встроенный шаблон);
  • Тип меню для первого уровня - Главное меню;
  • Тип меню для остальных уровней - Подменю;
  • Уровень вложенности меню - 2.

- Перейдите в раздел test_menu и создайте в нем 2 страницы: novaya_stranitsa_1 и novaya_stranitsa_2. При их создании необходимо отметить опцию Добавить пункт меню и выбрать тип Подменю.

Результат. Результатом этой работы будет меню такого вида:

Файл .podmenu.menu.php будет иметь следующую структуру:

<?
$aMenuLinks = Array(
    Array(
        "Новая страница 1", 
        "/test_menu/novaya_stranitsa_1.php", 
        Array(), 
        Array(), 
        "" 
    ),
    Array(
        "Новая страница 2", 
        "/test_menu/novaya_stranitsa_2.php", 
        Array(), 
        Array(), 
        "" 
    )
);
?>

Многоуровневое древовидное меню

Шаблоны компонента Меню поддерживают создание многоуровневого меню с глубиной вложения до 4-х уровней. Покажем это на примере. Выполнять работу на данном этапе удобнее в административной части.

Задача: создать четырехуровневое меню.

Решение. Решение осуществим на примере уже созданного выше меню с шаблоном tree.

  • Перейдите в административный раздел на страницу Управление структурой (Структура сайта > Файлы и папки)
  • В созданном ранее разделе /test_menu с помощью команды Добавить папку кнопки Добавить контекстной панели создайте новый каталог со следующими параметрами:
  • Имя папки - test_1;
  • Название раздела - test_1;
  • Тип меню - Подменю;
  • Название пункта - test_1.

Примечание: Для полноты картины можно создать в папках по дополнительной странице (кроме индексной). При создании их не забывайте добавить их в тип меню – Подменю. - Перейдите во вновь созданный раздел и создайте по описанному выше алгоритму папку /test_2.

Примечание: Если в последней по вложенности папке не создать файл меню, то в публичной части сайта она будет отображаться как страница, а не папка. - При необходимости добавления новых пунктов или редактирования существующих перейдите в нужный раздел (например, /test_menu) и на контекстной панели используйте команду Добавить меню кнопки Добавить. В открывшейся форме выберите тип меню равный Подменю, после чего отредактируйте нужные пункты меню.

Примечание: При удалении страниц и разделов из административной части потребуется последующее редактирование пунктов меню вручную.

Результат: результатом работы будет созданное древовидное меню в четыре уровня:

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

Если требуется уровень вложенности более, чем по умолчанию
В крайне редких случаях требуется реализовать меню с уровнем вложенности более 4. Эта проблема решается до версии 10.5 корректировкой файла стилей соответствующего шаблона компонента, с версии 10.5 - кастомизацией компонента. До версии 10.5 - Откройте для редактирования файл css используемого шаблона компонента. В конце описания стилей есть несколько групп, в названия которых включено *Items text. В этих стилях нужно добавить строки. Рассмотрим, как это сделать на примере группы стилей /*Items text color & size */ файла css шаблона Горизонтальное многоуровневое выпадающее меню. В исходном варианте эта группа имеет следующее содержание: php #horizontal-multilevel-menu li a, #horizontal-multilevel-menu li:hover li a, #horizontal-multilevel-menu li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a, #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a Для добавления еще одного уровня необходимо добавить еще две строки: php #horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover li a, #horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover li a Дополнив их соответственно :hover li - в одной строке и .jshover li - в другой строке. - Дополните аналогичным способом остальные группы стилей, имеющих в своем названии *Items text. - Сохраните внесенные изменения. Теперь вы можете использовать глубину вложений равную 5.

Выпадающее меню

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

  • Необходимо иметь два типа меню. Одно (первичное) будет применено как основное меню в разделе, другое (вторичное) – как источник формирования собственно выпадающего меню.
  • В каждом разделе должно быть обязательно создано вторичное меню с указанием его пунктов.
  • При указании путей до разделов, которые должны быть развернуты в выпадающем меню, необходимо указывать путь до папки подраздела, а не до индексного файла подраздела.
  • Выпадающее меню может быть построено не только на базе статических разделов и страниц, но и на основе инфоблоков.
  • Система допускает только четыре уровня вложения.

Меню из информационных блоков

Построение меню из динамических элементов - информационных блоков - позволяет снять с контент-менеджера часть нагрузки по поддержке сайта. Не нужно будет выполнять работы по актуализации меню в связи с появившимися новыми разделами и страницами. Для решения этой задачи необходимо использовать компонент Пункты меню (bitrix:menu.sections).

Перед созданием такого меню у вас должен быть создан необходимый тип инфоблока и сам инфоблок. Желательно создать пару разделов и элементов для наглядности.

  • Выполните команду Редактировать параметры компонента из меню компонента Меню.
  • В разделе Дополнительные настройки установите флажок в поле Подключать файлы с именами вида .тип_меню.menu_ext.php.
  • Сохраните внесенные изменения.
  • Перейдите в административную часть сайта.
  • Перейдите в раздел, для которого планируется создавать меню с помощью инфоблоков.
  • Создайте пустой файл под именем .podmenu.menu_ext.php в директории, в меню которой должны подключаться пункты инфоблока (например, /test_menu).

Примечание: Первая часть имени файла должна совпадать с названием меню, для которого применяется данный компонент. То есть для верхнего меню первая часть должна называться .top, для любого другого меню первая часть должна называться .luboe_drugoe.

  • Откройте файл для редактирования в визуальном редакторе.
  • Добавьте в тело файла компонент Пункты меню (bitrix:menu.sections).

Настройте параметры компонента:

  • Выберите тип информационного блока и сам информационный блок (например, Каталог товаров).
  • Установите глубину вложений любую, более 1.
  • Сохраните внесенные изменения. Форма создания файла закроется, файл появится в общем списке файлов папки.
  • Откройте его вновь для редактирования, но уже в режиме Редактировать как PHP.
  • Допишите в файле код проверки включения кода из ядра:

<? 
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
global $APPLICATION; 
$aMenuLinksExt = $APPLICATION->IncludeComponent(…
- После вызова компонента допишите код подключения к меню:

$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);

Конечный код указанного файла должен быть примерно таким:

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
global $APPLICATION; 
$aMenuLinksExt = $APPLICATION->IncludeComponent(
    "bitrix:menu.sections",
    "",
    Array(
        "ID" => $_REQUEST["ID"], 
        "IBLOCK_TYPE" => "books", 
        "IBLOCK_ID" => "5", 
        "SECTION_URL" => "/catalog/phone/section.php?", 
        "DEPTH_LEVEL" => "1", 
        "CACHE_TYPE" => "A", 
        "CACHE_TIME" => "3600" 
    )
);
$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
?>
  • Сохраните внесенные изменения.

Результат: Перейдите в публичную часть в раздел, для которого создавался файл .тип_меню.menu_ext.php. Вы увидите

Если вы ранее не отключали кеш, то, возможно, нужно сбросить кеш, чтобы меню отобразилось. созданное новое меню:

Красным цветом выделены пункты, созданные в рамках главного меню (массив $aMenuLinks, возвращающий пункты главного меню), синим цветом – полученные из инфоблоков (массив $aMenuLinksExt).

Два меню рядом

Рассмотрим довольно простой пример размещения двух меню в ряд на примере классического трехколоночного шаблона сайта, который мы использовали до сих пор.

  • Перейдите к редактированию шаблона сайта.
  • В режиме редактирования кода в левой колонке сайта создайте таблицу с одной строкой и двумя ячейками.
  • Переместите в левую ячейку компонент меню, использовавшийся в качестве верхнего меню, а в правую – компонент меню, использовавшийся в качестве левого меню.
  • Сохраните внесенные изменения.
  • Перейдите в публичную часть сайта.
  • Выполните команду Редактировать параметры компонента из меню компонента меню, стоящего в левой ячейке.
  • Задайте в качестве шаблона шаблон default.
  • В поле Уровень вложенности меню выставьте значение 1.
  • Сохраните внесенные изменения.
  • Создайте пункты в меню типа top (которое в левой ячейке).
  • Выполните команду Редактировать параметры компонента из меню компонента меню, стоящего справа.
  • Настройте его так, как мы настраивали в примере построения меню из инфоблоков.
  • Выполните команду Редактировать пункты меню для компонента меню, стоящего в правой ячейке.
  • Сохраните внесенные изменения.

После перезагрузки вы увидите простое меню по умолчанию. При переходе во внутренние разделы справа от основного меню будут раскрываться меню активного раздела в зависимости от его настроек (статичное или динамическое, из инфоблоков).

Графическое меню

Иногда встает задача создания меню с графическими элементами в качестве его пунктов. Эту задачу можно решить разными способами.

Самый простой – за счет редактирования файла CSS. Этот способ имеет преимущество в том плане, что текст, используемый в компонентах меню для разных пунктов, будет редактироваться обычным способом. Изображение, выводимое css, будет фоновым. Так как данный способ не относится непосредственно к Bitrix Framework, то он рассмотрен не будет.

Рассмотрим вариант представления пункта в качестве картинки, реализованный за счет возможностей расширенного режима редактирования меню. В этом случае текст на изображении средствами системы выводиться не будет, надпись названия раздела должна быть сделана непосредственно на картинке пункта меню.

Задача: создать меню, где пункты оформляются выводом картинок. Отображение картинок должно быть различным: для активного пункта меню и пассивного пункта меню. Если по каким-то причинам картинки меню не загружены на сайт (либо для пункта меню не заданы параметры), должна отображаться картинка по умолчанию.

  • Создайте по паре картинок на каждый из пунктов меню и картинку для пунктов без параметров или без картинки.
  • Создайте папку /images/menu в рамках структуры сайта.
  • Загрузите в эту папку созданные картинки.

Примечание: Для одного из пунктов меню картинки не загрузите, чтобы проверить работу кода.

  • Перейдите в административной части сайта в раздел с меню, для которого хотите назначить картинки.
  • Откройте меню для редактирования в Расширенном режиме.

- В строке Параметры каждого пункта меню в колонке Название введите ACT. - В строке Параметры каждого пункта меню в колонке Значение укажите путь до картинки, соответствующей активному состоянию пункта меню, от корня сайта. - Примените внесенные изменения. После перезагрузки добавится еще одна строка Параметры.

Примечание: Увеличить количество доступных сразу дополнительных параметров меню можно в настройках модуля Управление структурой с помощью соответствующей опции. - Заполните для каждого пункта меню поля Название (NOACT) и Значение (укажите путь до картинки, соответствующей неактивному состоянию пункта меню, от корня сайта). - Сохраните внесенные изменения.

Мы задали параметры для системы, по которым она будет определять какую картинку ей выводить. Теперь переходим к редактированию шаблона. Для простоты будем использовать шаблон default.

  • Перейдите в публичную часть сайта.
  • Выполните команду Редактировать параметры компонента из меню компонента Меню.
  • Назначьте для компонента шаблон default.
  • Перейдите к редактированию шаблона компонента, скопируйте его и откройте для редактирования.

Вам нужно заменить код вызова пункта меню со штатного на обращение к параметрам, заданным для данного меню. Делается это в этом участке кода шаблона:

<?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?>
  • Замените первую ссылку в коде на строку:

<a href="<?=$arItem["LINK"]?>">
<img src="<?=(array_key_exists("ACT", $arItem["PARAMS"]) 
&& file_exists($_SERVER["DOCUMENT_ROOT"].$arItem["PARAMS"]["ACT"]) ? 
$arItem["PARAMS"]["ACT"] : "/images/menu/default.png")?>" /></a>
- Замените вторую ссылку в коде на строку:

<a href="<?=$arItem["LINK"]?>">
<img src="<?=(array_key_exists("NOACT", $arItem["PARAMS"]) 
&& file_exists($_SERVER["DOCUMENT_ROOT"].$arItem["PARAMS"]["NOACT"]) ?
$arItem["PARAMS"]["NOACT"] : "/images/menu/default.png")?>" /></a>

Строки различаются между собой только выбором параметра из расширенных настроек: ACT или NOACT.

Примечание: В коде использован путь /images/menu/default.png для указания картинки, выводимой, если отсутствует картинка для пункта меню или если для него не указаны параметры. Вам нужно использовать собственное имя этой картинки. И другой путь, если вы сохраняете картинки в другой папке.

  • Сохраните внесенные изменения.

При переходе в публичную часть мы увидим такое меню: