Создание двухуровневого меню в Битрикс

Задача
есть меню из шаблона (Sailor)

 https://bootstraptaste.com/sailor-free-bootstrap-theme/


Необходимо внедрить его верстку в шаблон компонента битрикс

Стандартно
1. На тестовой странице размещаем компонент меню
Создаем в корне сайта тестовую страницу test.php


Меню двухуровневое, основное меню – главное, меню второго уровня – меню раздела.

2.Делаем копию шаблона

3. Переносим код верстки в template.php

<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="<?=SITE_TEMPLATE_PATH?>/img/logo.png" alt="" width="199" height="52" /></a>
        </div>
        <div class="navbar-collapse collapse ">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Home <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="index.html">Home slider 1</a></li>
                        <li><a href="index2.html">Home slider 2</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="typography.html">Typography</a></li>
                        <li><a href="components.html">Components</a></li>
                        <li><a href="pricing-box.html">Pricing box</a></li>
                        <li class="dropdown-submenu">
                            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown">Pages</a>
                            <ul class="dropdown-menu">
                                <li><a href="fullwidth.html">Full width</a></li>
                                <li><a href="right-sidebar.html">Right sidebar</a></li>
                                <li><a href="left-sidebar.html">Left sidebar</a></li>
                                <li><a href="comingsoon.html">Coming soon</a></li>
                                <li><a href="search-result.html">Search result</a></li>
                                <li><a href="404.html">404</a></li>
                                <li><a href="register.html">Register</a></li>
                                <li><a href="login.html">Login</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li class="dropdown"><a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Blog <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="blog-rightsidebar.html">Blog right sidebar</a></li>
                        <li><a href="blog-leftsidebar.html">Blog left sidebar</a></li>
                        <li><a href="post-rightsidebar.html">Post right sidebar</a></li>
                        <li><a href="post-leftsidebar.html">Post left sidebar</a></li>
                    </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Получаем два меню одно над другим:
С ними и будем работать

3. Добвляем тэги верски к объектам меню

Тэги битрикса:

root-item-selected 

— элемент меню 1-го уровня выбранный

root-item

— элемент меню 1-го уровня не выбранный

Тэги шаблона

dropdown-menu

— выпадаюшее меню
Добавим ко всем тэгам

<ul>
<?if ($arItem["DEPTH_LEVEL"] == 1):?>
   <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a>
      <ul class="dropdown-menu">
<?else:?>
   <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
      <ul class="dropdown-menu">
<?endif?>

А к тегам битрикса

root-item

Тэги верстки

dropdown

к тэгу битрикса

root-item-selected

тэг верстки

dropdown active

В файле style.css шаблона компонента закомментируем все упоминания цветов
элементов и фона, увеличим ширину для выпадающего меню
/*Sub-menu box*/

#horizontal-multilevel-menu li ul
{
width:200px;
}

и добавим элемент “галочка вниз”

<i class="fa fa-angle-down"></i>

к пунктам меню, являщимся родительскими по отношению к выпающему меню

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
   <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected dropdown active<?else:?>root-item dropdown<?endif?>"><?=$arItem["TEXT"]?><i class="fa fa-angle-down"></i></a>
      <ul class="dropdown-menu">
<?else:?>
   <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?><i class="fa fa-angle-down"></i></a>
      <ul class="dropdown-menu">
<?endif?>

Получим:

В

<ul id="horizontal-multilevel-menu">

добавляем

class="nav navbar-nav"

из верстки

И код вывода элемента Битрикс оборачиваем в элементы шаблона

<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="<?= SITE_TEMPLATE_PATH ?>/img/logo.png" alt=""
                                                           width="199" height="52"/></a>
        </div>
        <div class="navbar-collapse collapse ">

и закроем код шаблона битрикс закрывающими тэгами

        </div>
    </div>
</div>

добавим их сразу перед

<? endif ?>

Добавим элементу

navbar-collapse collapse

свойство

float:right

Общих черт все больше и больше!

Добавим из верстки в тэг элемента битрикса

class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0"
   data-close-others="false"

Копируем код компонента битрикс со страницы test.php

И вставляем его в файл header.php шаблона:

<?$APPLICATION->IncludeComponent(
	"bitrix:menu",
	"horizontal_multilevel3",
	Array(
		"ALLOW_MULTI_SELECT" => "N",
		"CHILD_MENU_TYPE" => "left",
		"DELAY" => "N",
		"MAX_LEVEL" => "2",
		"MENU_CACHE_GET_VARS" => array(""),
		"MENU_CACHE_TIME" => "3600",
		"MENU_CACHE_TYPE" => "N",
		"MENU_CACHE_USE_GROUPS" => "Y",
		"ROOT_MENU_TYPE" => "top",
		"USE_EXT" => "N"
	)
);?>

Почти готово

Осталось отработать дизайн на мобильных устройствах;

Но об это в следующий раз.

Leave a Reply

Your email address will not be published. Required fields are marked *