Респонсивное выпадающее меню для 1С-Битрикс

Андрей Елисеев, опубликовано 23 октября 2015 г.

Горизонтальные меню под шапкой встречаются практически на каждом сайте, на сегодняшний день это стандартный навигационный инструмент. Для пущего удобства в этих меню также используются «выпадашки», то есть выпадающие подменю при наведении на один из родительских пунктов. Подобный инструмент есть в стандартном комплекте Bootstrap, однако там он реализован не очень правильно, потому что эти самые выпадашки появляются по клику на родительский элемент, а не по наведению. Это значит, что на страницу самого родительского элемента мы перейти не можем, за что получим по шапке от сеошника. С другой стороны, если сайт респонсивный, то на просмотре с мобильного телефона выпадашки при наведении оказываются несколько неуместными. Как же быть? Давайте разберемся. Ниже приводим рецепт интеграции выпадающих меню Bootstrap в CMS «1С-Битрикс», мы научим их выпадать при наведении, а не клике, а при мобильном просмотре выпадающие подменю попросту спрячем.

Итак, для интеграции выпадающих меню Bootstrap в инструментарий «1С-Битрикс» воспользуемся стандартным компонентом «Меню» и немножко подправим столь же стандартный шаблон horizontal_miltilevel. Ниже приводим код шаблона для этого компонента, а потом сделаем еще несколько пояснений.

<?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<?if ($arItem["SELECTED"]):?> active<?endif?>"><a href="<?=$arItem["LINK"]?>" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"><?=$arItem["TEXT"]?></a>
				<ul class="dropdown-menu">
		<?else:?>
			<li class="dropdown<?if ($arItem["SELECTED"]):?> active<?endif?>"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
				<ul class="dropdown-menu">
		<?endif?>

	<?else:?>

		<?if ($arItem["PERMISSION"] > "D"):?>

			<?if ($arItem["DEPTH_LEVEL"] == 1):?>
				<li<?if ($arItem["SELECTED"]):?> class="active"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
			<?else:?>
				<li<?if ($arItem["SELECTED"]):?> class="active"<?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><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?>

А теперь для того, чтобы вся эта система заработала должным образом, заставим выпадашки появляться при наведении мышки на родительский элемент. Более того, как уже было сказано выше, при просмотре на мобильном телефоне нам эти самые выпадашки не нужны. Поэтому запустим их на разрешениях более 768 пикселей, это стандартный второй шаг респонсива для Bootstrap. Для этого воспользуемся media-запросом. Отправляемся в нашу CSS и вписываем туда нижеследующий код.

@media (min-width: 768px) {
	.dropdown:hover>.dropdown-menu {
	display: block;
	}
}

И, наконец, последнее, если вам это интересно. Стандартный код ссылки родительского элемента (первого уровня), предлагаемый Bootstrap, выглядит как <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>. Чтобы эта сволочь не включала нашу выпадашку по клику, и мы могли по этому самому клику благополучно переходить на родительский элемент, мы убрали из этого кода вот такой маленький атрибут: data-toggle="dropdown". И еще в шаблоне компонента Битрикса убрали указующую вниз галочку на родительском элементе, вод эту: <span class="caret"></span>. Чисто ради эстетики. Хотя, конечно, ее можно и вернуть, если вы хотите явным образом показать посетителю сайта, что под этим пунктом прячется выпадашка. На этом все.

Красивых вам сайтов!

Метки: ,