Skip to main content

Menu

Добавление меню на сайт.

Компонент Menu предостовляет набор виджетов для добавления меню на сайт.

Данные виджеты используются для добавления на сайт различных видов меню. В настоящий момент реализованы 3 вида меню:

  • xmenu-list
    Пункты меню отображаются в виде ссылок сгруппированных с помощью обычного нестилизованного списка UL.
    Удобно использовать для отображения меню в подвале сайта.
  • xmenu-vert
    Отображает вертикальное меню.
    Если пункт меню имеет подпункты, то рядом с таким пунктом добавляет иконка для раскрытия подпунктов.
    При раскрытии пункта меню все остальные пункты скрываются.
    Пункты меню 1го уровня имеют слева иконки.
    Удобно использовать для отображения главного меню панели управления.
  • xmenu-main
    Отображается горизонтальное меню. Если пункт меню имеет подпункты, то они отображаются при наведении курсора на пункты меню.
    Поддерживаются 3 уровня вложенности. Данное меню адаптивное и при размере экрана меньше 768 px, преобразуется в вертикальное меню. Удобно использовать для отображения главного меню сайта.

Для простоты создания других типов меню разработан единый формат определения структуры меню, а также набор api-функция для работы с этим форматом. Формат представляет собой XML-текст следеющего вида:

<xmenu>
<m title="Знакомимся" path="users" id="acquaint" >
  <m title="Поиск анкет" path="users" id="users-search" />
  <m title="Сейчас онлайн" path="users/online" id="users-online" />
  <m title="Новые пользователи" path="users/new" id="users-new" />
  <m title="Хотят познакомиться" path="users/acquaint" id="users-acquaint" />
  <m title="Сегодня день рождения" path="users/birthday" id="user-birthday" />
</m>
<m title="Общаемся" path="forum" id="communicate" >
  <m title="Форум" path="forum" id="forum" />
  <m title="Клубы" path="clubs" id="clubs" />
  <m title="Блоги" path="blogs" id="blogs" />
  <m title="Видеочат" path="videochat" id="videochat" />
  <m title="Конкурсы" path="contests" id="contests" />
  <m title="Опросы" path="poll" id="poll" />
</m>
<m title="Встречаемся" path="events" id="meet" >
  <m title="Избранные встречи" path="news" id="news" />
  <m title="Анонсы встреч" path="announces" id="announces" />
  <m title="Календарь всех встреч" path="calendar" id="calendar" />
</m>
<m title="Медиа" path="photo/files/last" id="media" >
  <m title="Фото" path="photo/files/mbest" id="photo" />
  <m title="Видео" path="video/files/mbest" id="video" />
  <m title="Аудио" path="audio/files" id="audio" />
  <m title="Правила размещения фото" path="terms-photo" id="terms-photo" />
</m>
<m title="?" mtitle="Помощь" path="help" id="help" >
  <m title="О портале" path="help" id="about" />
  <m title="Правила портала" path="terms-of-use" id="terms-of-use" />
  <m title="Авторам" path="help-authors" id="help-authors" />
  <m title="Организаторам" path="help-for-event-organizers" id="help-for-event-organizers" />
  <m title="Рекламодателям" path="reklama" id="reklama" />
  <m title="Обратная связь" path="feedback" id="feedback" />
</m>
<m title="видеочат" path="videochat" id="videochat" class="visible-xs" style="margin-top:2rem;font-weight: normal;opacity:.5;" icon-class="fa fa-video-camera" />
<m title="поиск по сайту" id="search" class="visible-xs b-header__menu-item-search-toggler" style="font-weight: normal;opacity:.5;" icon-class="fa fa-search" />
<m title="поддержать сайт!" path="help" id="support" class="visible-xs b-header__menu-item-search-toggler" style="font-weight: normal;opacity:.5;" icon-class="fa fa-plus" ></m>
<m type="sep" class="hidden-xs" />
<m hint="Войти в видео-чат" path="videochat" id="videochat" class="hidden-xs b-header__menu-item-videochat-link" />
<m hint="Поиск по сайту" id="search" class="hidden-xs b-header__menu-item-search-toggler b-header__menu-item-search-link" />
</xmenu>

API-функции xmenu находятся в файле xtools/includes/xmenu.inc. Наиболее важные функции описаны ниже:

  • function prepare_menu_data($dataXml);
  • function menu_tree_output($menu_widget_id,$data,$level = 0,$options=null);

Функция function prepare_menu_data($dataXml);​

Получает на вход строку со структурой меню в формате XML, описанном выше.
Парсит её, обрабатывает каждый пункт и возвращает массив с данными по структуре меню и каждому пункту.

При обработки каждого пункта проверяются следуюещие данные:

  • Доступ текущего пользователя к меню (на основе анализа соответствующего данному пункту меню route)
  • Имеет ли пункт подпункты
  • Входит ли пункт в текущий активную цепочку в структуре навигации сайта

Функция menu_tree_output($menu_widget_id,$data,$level = 0,$options=null);​

Формирует конечный html-код для отображения меню.
Получает на вход $menu_widget_id виджета, которые будет отрисовывать меню, а также данные по структуре меню, предварительно подготовленные с помощью prepare_menu_data($dataXml).

Как создать новый тип меню​

Необходимо создать виджет, отвечающий за общее формирование меню (для примера: xmenu-company). Внутри этого виджета создать виджет, который будет отвечать за отрисовку каждого пункта этого меню (в данном случае: xmenu-company__item).

В код контоллера виджета xmenu-company.inc добавить строки для получения структуры меню и отрисовки её пунктов:

$xmenu_api = menu_api();

$widgetApi->loadWidgetSettings($widget_info,$vars);
$data =  $widget_info['settings']['data']['value'];
$vars['data'] = $data = $xmenu_api->prepare_menu_data($data);  
$vars['menu'] = $xmenu_api->menu_tree_output($widget_id,$data);

Last updated on