Привет! Это команда RootHelp и мы продолжаем разруливать тему "Меню в Битрикс".
Верхнее меню
Для упрощения разработки меню используем системный шаблон horizontal_multilevel и скопируем его под названием top в наш шаблон сайта (как мы ранее делали для нижнего меню). В дополнительных настройках компонента меню выберем 3 уровня вложенности (для самого выпадающего меню) и нижнее меню в качестве меню для 2 и 3 уровней.
Внимание. Мы могли воспользоваться всего 1 типом меню - верхним. Однако тогда нам пришлось бы при разработке шаблона поставить условие "не выводить дочерние пункты для 1 меню". Это усложнило бы шаблон, хотя возможно и было бы проще и "красивее".
Самое важное, на что стоит обратить внимание, это 2 новых параметра, характеризующих пункты меню, которые могут нас интересовать:
Итак, начнём по порядку:
Сделаем так, чтобы 1-й пункт меню, к примеру, с иконкой домика при узком разрешении экрана (на мобильных устройствах, например) превращался в текст:
<li class="active li-first"><a href="index.html"><em class="hidden-phone"></em><span class="visible-phone">Home</span></a></li>
К сожалению, это слишком громоздкая конструкция и она слишком сильно отличается от идущих далее пунктов, поэтому придётся задать его отдельно, поставив условие на ITEM_INDEX=0. Однако стоит помнить, что индекс начинает строиться с 0 для каждого уровня, поэтому помимо индекса проверяем и DEPTH_LEVEL=1.
Другой путь - задать отдельное свойство для данного пункта меню. Это делается в расширенном режиме редактирования меню. Зададим пункту меню Home параметр IMAGE=Y. В таком случае отладочный массив будет содержать это свойство и по нему можно будет определить нужный нам пункт меню. Простейшая проверка на наличие значения в переменной IMAGE будет выглядеть так:
<?if (!empty($arItem["PARAMS"]['IMAGE'])):?> <!--TRUE--> <?else:?> <!--FALSE--> <?endif?>
Сделаем эту проверку до всех остальных действий с меню. Поскольку у нас иконка выводится только для 1 корневого элемента логика будет максимально простой. Однако при желании мы можем передавать в этом параметре, например тип иконки или адрес её картинки, если надо будет использовать несколько картинок для разных пунктов меню.
Не забудем поставить класс active в случае если пункт меню соответствует местонахождению в структуре. В итоге на данный момент блок будет выглядеть примерно так:
<?if (!empty($arItem["PARAMS"]['IMAGE'])):?> <li class="<?if ($arItem["SELECTED"]):?>active <?endif?>li-first"> <a href="<?=$arItem["LINK"]?>"><em class="hidden-phone"></em> <span class="visible-phone"><?=$arItem["TEXT"]?></span></a></li> <?else:?> ..... <?endif?>
Теперь обратим внимание на кусок кода, осуществляющий проверку на наличие у пункта меню дочерних по условию <?if ($arItem["IS_PARENT"]):?>. Согласно макету для пунктов меню-родителей мы должны добавить класс class="sub-menu" - он добавит симпатичную стрелочку этим пунктам меню.
Так же не забудем, что начиная с пунктов родителей у нас начинается новый "список", выделяющий следующий уровень меню, который необходимо деактивировать (его появление можно сделать на JS при наведении курсора мыши). Тогда этот блок кода будет выглядеть:
<?if ($arItem["IS_PARENT"]):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li class="sub-menu <?if ($arItem["SELECTED"]):?> active<?endif?>"> <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> <ul style="display: none;"> <?else:?> <li class="sub-menu <?if ($arItem["SELECTED"]):?> active<?endif?>"> <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a> <ul style="display: none;"> <?endif?> <?else:?> ........... <?endif?>
В принципе меню готово и осталось лишь слегка его подправить.
Для устройств с узким экраном верхнее меню скрывается и раскрывается в ответ на нажатие кнопки "Menu". Следует добавить параметр в файл .parameters.php в шаблоне компонента, задающий данный текст:
"TOP_MENU_NAME" => Array(
"NAME" => GetMessage("TOP_MENU_NAME"),
"TYPE" => "HTML",
"DEFAULT" => "Menu",
),
Создаем для него языковые фразы и выводим в шаблоне компонента:
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse_"> <?=$arParams["TOP_MENU_NAME"]?></a>
Вот таким вот образом можно создавать простейшие верхние меню в мире Битрикс :)
А теперь небольшой бонус-совет.
Система по умолчанию позволяет создать только четыре уровня вложения. Практика показывает, что данной глубины вложения хватает на большинство типовых проектов.
Но что же делать если требуется уровень вложенности более, чем по умолчанию.
В крайне редких случаях требуется реализовать меню с уровнем вложенности более 4. Эта проблема решается до версии 10.5 корректировкой файла стилей соответствующего шаблона компонента, с версии 10.5 - кастомизацией компонента.
До версии 10.5
Откройте для редактирования файл css используемого шаблона компонента.
В конце описания стилей есть несколько групп, в названия которых включено *Items text. В этих стилях нужно добавить строки. Рассмотрим, как это сделать на примере группы стилей /*Items text color & size */ файла css шаблона Горизонтальное многоуровневое выпадающее меню.
В исходном варианте эта группа имеет следующее содержание:
#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
Для добавления еще одного уровня необходимо добавить еще две строки:
#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.
Благодарю за внимание! И до скорых встреч в мире Битрикс :)