Горизонтальное меню в 1С-Битрикс

 

На прошлом этапе, мы определились какие компоненты у нас будут отвечать за ту или иную область шаблона. В данном посте мы рассмотрим как реализовать «горизонтальное меню»

 

 

Горизонтальное меню

 

Меню, я думаю в том или ином виде, есть на любом сайте. Как я указал на этапе «подбор компонентов для шаблона«, за меню у нас будет отвечать компонент «bitrix:menu».

Откроем файл www\bitrix\templates\имя_шаблона\header.php и вместо html кода нашего меню:

 

 

вставим код вызова компонента «bitrix:menu»

 

 

Если посмотреть что у нас получилось в браузере, то увидим вот такого «монстра»:

 

templeate_bad_menu

 

Очевидно, что нам нужно использовать свой шаблон «horizontal_multilevel», для этого скопируем папку www\bitrix\components\bitrix\menu\templates\horizontal_multilevel

в свой шаблон по адресу www\bitrix\templates\test\components\bitrix\menu

 

Обозначим, что это наш шаблон, изменим название с «horizontal_multilevel» на «my_horizontal_multilevel». Таким образом, мы создали свой собственный шаблон. Подключить  его мы можем уже сейчас, используя в вызове компонента вместо horizontal_multilevelmy_horizontal_multilevel. Но это не даст, ни каких визуальных изменений, все также будет выводиться огромное красное меню.

Теперь наша основная задача — отредактировать шаблон компонента my_horizontal_multilevel таким образом, пока внешнее отображение компонента не будет похоже на меню шаблона прототипа. Это и называется интегрировать компонент.

 

И так по порядку, как это делаю я:

  1. Зайдите в директорию www\bitrix\templates\имя_шаблона\components\bitrix\menu\my_horizontal_multilevel\images,  очистите директорию. Скопируйте изображения из www\bitrix\templates\test\images относящиеся к меню в данную папку. Таким образом, мы отделим изображения меню от шаблона сайта, теперь они относятся только к шаблону компонента (если меню задается цветовыми кодами, то изображений относящихся  к меню может и не быть).
  2. Далее отделим от шаблона все стили связанные с меню. Для этого заходим в стиль шаблона сайта (www\bitrix\templates\test\template_styles.css) и вырезаем все стили связанные с горизонтальным меню. Открываем файл стилей шаблона компонента (www\bitrix\templates\имя_шаблона\components\bitrix\menu\my_horizontal_multilevel\style.css),  все удаляем и вставляем вырезанные стили.
  3. Теперь необходимо править шаблон компонента, т.е. файл   www\bitrix\templates\имя_шаблона\components\bitrix\menu\my_horizontal_multilevel\template.php. Данный момент подробно я освещать не буду, вы должны подправить шаблон сами, все зависит от вашего уровня знаний html, php и понимания сути происходящего. Добавлю только пару слов, удалите из шаблона все что вам вряд ли пригодиться. Если вас интересует что получает шаблон в массиве $arResult от своего контроллера, откройте его  www\bitrix\components\bitrix\menu\component.php и изучите, но править  его не стоит. Да в нашем случае это и не нужно, нам достаточно редактировать шаблон компонента.Урезав все лишнее, у меня получилось следующее:

     

    Думаю, найдутся люди, которых введет в заблуждение следующая конструкция <?=$arItem[«LINK»]?>, с точки зрения синтаксиса PHP она верна. Это краткая форма записи <?echo $arItem[«LINK»]?>, т.е. печать переменной. В CMS 1С-Битрикс вы часто будете встречаться с такой записью.

 

Если мы посмотрим в браузере что у нас вышло, то увидим следующие:

 

templeate_component_menu_small

 

Оригинал меню в шаблоне-прототипе, выглядело так:

 

templeate_menu_small

 

Различия только в  пунктах меню, но это не главное, т.к. компонент «bitrix:menu» формирует свое содержимое в зависимости от структуры сайта. Главное добиться сходства отображение компонента с меню шаблона-прототипа. Поэтому на данный момент, компонент можно считать интегрированным.




Буду признателен если вы поделитесь данным постом


Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены