Шаблоны меню

Шаблоны меню

Вывод данных в компоненте Меню реализован с помощью шаблонов. Шаблоны могут создаваться пользователями самостоятельно.

Системные шаблоны

В дистрибутиве по умолчанию включены несколько шаблонов. Описания некоторых из них:

• Default (Вертикальное меню по умолчанию) – шаблон для вертикального меню. Самый простой шаблон. При выборе в параметрах компонента глубины вложения более 1 вы увидите список страниц сайта в общей иерархии. То есть индексная страница сайта (раздела) будет размещена на одном уровне с вложенной страницей (разделом). Это затрудняет осмысление структуры сайта посетителем. Поэтому шаблон рекомендуется для простых видов меню и главных меню верхнего уровня. Шаблон достаточно прост для кастомизации под конкретный дизайн.

  

• Tree (Древовидное меню) – шаблон для вертикального меню. Реализует меню в виде древовидной структуры аналогично Проводнику Windows. Вложенные страницы показаны в виде страниц в папке (разделе), что существенно облегчает понимание пользователем структуры сайта. Это меню не всегда удобно при разветвленной структуре интернет-проекта, так как существенно растягивает по вертикали колонку, где оно расположено.

  

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

  

• Grey_tabs (Серое меню в виде закладок) и Blue_tabs (Голубое меню в виде закладок) – шаблоны для горизонтального меню. Отличаются только внешним видом. Это самые простые шаблоны, аналогичные шаблону по умолчанию (default) для вертикального меню.

  

• Horizontal_multilevel (Горизонтальное многоуровневое выпадающее меню) – шаблон для горизонтального меню. Аналогично Vertical_multilevel (Вертикальному многоуровневому выпадающему меню) и реализует меню с выпадающими пунктами меню нижнего уровня.

  

Создание Шаблонов меню

Выделение HTML элементов для построения меню

Создание шаблонов меню начинается с выделения необходимых HTML областей в шаблоне сайта:

• неизменной верхней и нижней части шаблона;
• повторяющихся элементов. Например, для горизонтального меню – это ячейки таблицы, а для вертикального – строки.

Создание шаблона меню

Все шаблоны меню имеют одинаковую структуру:

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

В php шаблоне для вывода меню используется массив $arItem - копия массива пунктов меню, в котором каждый пункт в свою очередь представляет собой массив, использующий следующие параметры:

• TEXT - заголовок пункта меню;
• LINK - ссылка на пункте меню;
• SELECTED - активен ли пункт меню в данный момент, возможны следующие значения:
  • true - пункт меню выбран;
  • false - пункт меню не выбран;
• PERMISSION - право доступа на страницу, указанную в LINK для текущего пользователя. Возможны следующие значения:
  • D - доступ запрещён;
  • R - чтение (право просмотра содержимого файла);
  • U - документооборот (право на редактирование файла в режиме документооборота);
  • W - запись (право на прямое редактирование);
  • X - полный доступ (право на прямое редактирование файла и право на изменение прав доступа на данный файл);
• ADDITIONAL_LINKS - массив дополнительных ссылок для подсветки меню;
• ITEM_TYPE - флаг, указывающий на тип ссылки, указанной в LINK, возможны следующие значения:
  • D - каталог (LINK заканчивается на "/");
  • P - страница;
  • U - страница с параметрами;
• ITEM_INDEX - порядковый номер пункта меню;
• PARAMS - ассоциативный массив параметров пунктов меню. Параметры задаются в расширенном режиме редактирования меню.

Рассмотрим построение шаблона меню на примере Левого меню, представленного в демо-версии продукта (шаблон .default компонента Меню):

<?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?>

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

При создании шаблона меню потребуется также создать дополнительные стили в таблице стилей (CSS). Например, для текстового меню: цвет пункта меню и цвет текущего (активного) пункта меню.

Отдельного представления в шаблоне могут потребовать заголовки разделов (например, название текущего раздела при просмотре подразделов). Также можно предусмотреть использование графических или текстовых обозначений, например, того, что данный пункт ссылается на подразделы или документ текущего раздела и т.д.

Быстрый доступ к редактированию шаблона каждого типа меню можно осуществить в режиме Правки с помощью пункта Редактировать шаблон компонента меню команд кнопки по управлению компонентом.