29  /  380
Справочник

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

Просмотров: 142779
Дата последнего изменения: 02.11.2023
Роберт Басыров
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5
Недоступно в лицензиях:
Ограничений нет

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

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

Для примера мы создадим в структуре сайта новый раздел 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) и на контекстной панели используйте команду Добавить меню кнопки Добавить. В открывшейся форме выберите тип меню равный Подменю, после чего отредактируйте нужные пункты меню.

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

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

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

Если требуется уровень вложенности более, чем по умолчанию

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

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

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

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

Построение меню из динамических элементов - информационных блоков - позволяет снять с контент-менеджера часть нагрузки по поддержке сайта. Не нужно будет выполнять работы по актуализации меню в связи с появившимися новыми разделами и страницами. Для решения этой задачи необходимо использовать компонент Пункты меню (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 для указания картинки, выводимой, если отсутствует картинка для пункта меню или если для него не указаны параметры. Вам нужно использовать собственное имя этой картинки. И другой путь, если вы сохраняете картинки в другой папке.

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

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


56
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии