Недавно возникла потребность Бутстрап-верстку интегрировать в Битрикс-сайт. Естесственно — самая главная головная боль — многоуровневое верхнее меню. Оказалось, «забутстрапить» верхнее меню довольно просто. То есть, как известно — сначала копируем шаблон компонента меню horizontal_multilevel, и потом вместо того кода, который есть, вставляем приведенный ниже. Кто кодирует локально — этот файл будет у вас находится по следующему пути: bitrix/templates/название_шаблона/components/bitrix/menu/horizontal_multilevel_ваше_название_копии_шаблона/template.php.
Внимание! Использован не Bootstrap Twitter, а вот этот Bootstrap getbootstrap.com. Соответственно, для работы выпадающего меню необходимо подключить не только bootstrap.min.css, но и bootstrap.min.js.
ДЕМО: kp-ra.org
Чтобы посмотреть меню в действии, измените ширину браузера до размеров от планшета до телефона — меню сворачивается до иконки, при клике выпадает вниз. Второй уровень вложенности тоже выпадает при клике на пункт.
Ну, наконец код:
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?if (!empty($arResult)):?> <ul class="nav navbar-nav"> <? $previousLevel = 0; foreach($arResult as $arItem):?> <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?> <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?> <?endif?> <?if ($arItem["IS_PARENT"]):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li class="dropdown"><a href="<?if($arItem['LINK']['$str']!='p'){echo '#';}?>" class="<?if ($arItem["SELECTED"]):?>active<?else:?>dropdown-toggle<?endif?>" data-toggle="dropdown" role="button" aria-expanded="false"><?=$arItem["TEXT"]?><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a> <ul> <?endif?> <?else:?> <?if ($arItem["PERMISSION"] > "D"):?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?else:?> <?if ($arItem["DEPTH_LEVEL"] == 1):?> <li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <?else:?> <li style="padding: 5px 0 5px 0px;"><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li> <?endif?> <?endif?> <?endif?> <?$previousLevel = $arItem["DEPTH_LEVEL"];?> <?endforeach?> <?if ($previousLevel > 1)://close last item tags?> <?=str_repeat("</ul></li>", ($previousLevel-1) );?> <?endif?> </ul> <?endif?>
Внимание! Вся верстка у меня вынесена в header. В шаблоне компонента меню только сам список с добавлением классов, которые позволяют сделать меню двухуровневым. Следующий код — для того, чтобы вы смогли идентифицировать, куда вставлять модуль меню. При желании можно всю «внешнюю» верстку перенести в шаблон компонента «меню».
И обратите внимание — кавычки здесь выводятся «криво», проверьте после переноса кода, чтобы отображались корректно.
<div class="menu"> <div class="container"> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <?$APPLICATION->IncludeComponent("bitrix:menu", "horizontal_multilevel_bootstrap", Array( "ROOT_MENU_TYPE" => "top", // Тип меню для первого уровня "MENU_CACHE_TYPE" => "A", // Тип кеширования "MENU_CACHE_TIME" => "3600", // Время кеширования (сек.) "MENU_CACHE_USE_GROUPS" => "Y", // Учитывать права доступа "MENU_CACHE_GET_VARS" => "", // Значимые переменные запроса "MAX_LEVEL" => "2", // Уровень вложенности меню "CHILD_MENU_TYPE" => "", // Тип меню для остальных уровней "USE_EXT" => "N", // Подключать файлы с именами вида .тип_меню.menu_ext.php "DELAY" => "N", // Откладывать выполнение шаблона меню "ALLOW_MULTI_SELECT" => "N", // Разрешить несколько активных пунктов одновременно ), false );?> </div><!-- /.navbar-collapse --> </nav><!-- /nav --> </div><!-- /container --> </div><!-- /menu -->
You must be logged in to post a comment.