Menu Component - uniqcle/Bitrix GitHub Wiki

Simple Menu

Создаем тип меню

Настройки-Настройки модулей-Управление структурой
Устанавливаем тип меню: mytop/мое верхнее меню

Создаем сущность меню Структура сайта-Интернет магазин-Добавить меню

В зависимости где должно располагаться или глобально или в папке

Добавляем в верстку компонент меню
Копируем в текущий шаблон и переходим к редактированию.

Можно удалить папки lang, images, а также description.php, styles.css

templates-skillbox-components-bitrix-menu-maintop

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <?if (!empty($arResult)):?>
    <ul>
        <?
        foreach($arResult as $arItem):
        if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1)
            continue;
        ?>
        <?if($arItem["SELECTED"]):?>
        <li class="sub-menu popap-show active">
            <a href="<?=$arItem["LINK"]?>" itemprop="url"><?=$arItem["TEXT"]?></a>

        </li>
        <?else:?>
        <li><a href="<?=$arItem["LINK"]?>" itemprop="url"><?=$arItem["TEXT"]?></a></li>
        <?endif?>

        <?endforeach?>

    </ul>
    <?endif?>
</nav>

Multilevel Menu

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<?if (!empty($arResult)):?>
<ul>

<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

	<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
		<?=str_repeat("</ul></div></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
	<?endif?>

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

		<?if ($arItem["DEPTH_LEVEL"] == 1):?>
			<li class="sub-menu popap-show <?if ($arItem["SELECTED"]):?>active<?else:?> <?endif?>" ><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?></a>
                <div class="popap-block">
                <ul>
		<?else:?>
                    <li><a href="<?=$arItem["LINK"]?>" itemprop="url"><?=$arItem["TEXT"]?></a></li>

				<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><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>
<div class="menu-clear-left"></div>
<?endif?>
            </nav>



<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul>
        <li class="sub-menu popap-show active">
            <a href="#" itemprop="url">Главная</a>
            <div class="popap-block">
                <ul>
                    <li><a href="#" itemprop="url">Пример длинного меню</a></li>
                    <li><a href="#" itemprop="url">Меню 2</a></li>
                    <li><a href="#" itemprop="url">Меню 3</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#" itemprop="url">О нас</a></li>
        <li><a href="#" itemprop="url">Условия</a></li>
        <li><a href="#" itemprop="url">FAQ</a></li>
        <li class="sub-menu popap-show">
            <a href="#" itemprop="url">Страницы</a>
            <div class="popap-block">
                <ul>
                    <li><a href="#" itemprop="url">Меню 1</a></li>
                    <li><a href="#" itemprop="url">Меню 2</a></li>
                    <li><a href="#" itemprop="url">Меню 3</a></li>
                </ul>
            </div>
        </li>
        <li class="sub-menu popap-show">
            <a href="#" itemprop="url">Контакты</a>
            <div class="popap-block">
                <ul>
                    <li><a href="#" itemprop="url">Меню 1</a></li>
                    <li><a href="#" itemprop="url">Меню 2</a></li>
                    <li><a href="#" itemprop="url">Меню 3</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

Source

Упрощаем кастомизацию многоуровнего вертикального меню

Кастомизация горизонтального меню

Меню на основе разделов и элементов

https://www.youtube.com/watch?v=D9RnspA67Fg&index=59&list=PLloc5hlT7wzyBwD_YeWFyrG7KDhS5kE4U

Создать многоуровневое меню

/*
1) Зайти в панель администрирования сайтом →Настройки→Настройки продукта→Настройки модуля→Управление структурой» 
2) Далее в поле "Типы меню" - добавляете тип меню, например, catalog 
3) Cоздаете файл типа .catalog.menu.php, где catalog — наименование вашего меню. После чего загружаете данный файл в корень вашего сайта (если меню создается для главной), либо в необходимый раздел (если - для раздела). 
Содержимое файла catalog.menu.php :
 
$aMenuLinks = Array(
);
 
/* 
4) По такому же принципу, как описано в 3 пункте, создаете файл .catalog.menu_ext.php и загружаете его на сайт 
Содержимое файла catalog.menu_ext.php 
*/ 

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
global $APPLICATION;
 
   $aMenuLinksExt=$APPLICATION->IncludeComponent("bitrix:menu.sections", "", array(
   "IS_SEF" => "Y",
   "SEF_BASE_URL" => "/catalog/",
   "SECTION_PAGE_URL" => "#SECTION_CODE#/",
   "DETAIL_PAGE_URL" => "#SECTION_CODE#/#ELEMENT_CODE#",
   "IBLOCK_TYPE" => "catalog",
   "IBLOCK_ID" => "ID", // ID - id вашего инфоблока
   "DEPTH_LEVEL" => "4",
   "CACHE_TYPE" => "A",
   "CACHE_TIME" => "0",
   "CACHE_TYPE" => "A",
   "CACHE_TIME" => "3600"
   ),
false
);
$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
 
/*
5) После этого для размещения компонента многоуровневого меню из разделов инфоблока в нужном месте шаблона сайта, вам необходимо использовать следующий код: 
*/
 $APPLICATION->IncludeComponent("bitrix:menu", "tree", array(
   "ROOT_MENU_TYPE" => "catalog",
   "MENU_CACHE_TYPE" => "A",
   "MENU_CACHE_TIME" => "3600",
   "MENU_CACHE_USE_GROUPS" => "Y",
   "MENU_CACHE_GET_VARS" => array(
   ),
   "MAX_LEVEL" => "4",
   "CHILD_MENU_TYPE" => "catalog",
   "USE_EXT" => "Y",
   "DELAY" => "N",
   "ALLOW_MULTI_SELECT" => "N"
   ),
   false
); 

/*
Вывод 
*/

<div class="section_menu">
    <ul>
         <li class="parent sel"><a href="#">
           <span class="icon">
                <img src="images/2_directions/cabel_icon_dark.png" alt=""
                     class="directions_menu_item_image">
            </span>
            <span class="txt">Металлопрокат</span>
        </a>
            
            <ul>
				<?php foreach($arResult as $i => $arItem): ?>

                <li class=" parent <?php if($arItem['SELECTED']) echo 'open' ?>"><a href="<?=$arItem['LINK'] ?>"><?=$arItem['TEXT']; ?><span cloass="icon"></span></a>

                  
                    <?php if(!empty($arItem['ITEMS'])): ?>

                    <ul>

                    	<?php foreach($arItem['ITEMS'] as $arSubItem):   ?>

                             <li <?php if($arSubItem['SELECTED']) echo 'class = "sel"' ?>><a href="<?=$arSubItem['LINK']; ?>"><?=$arSubItem['TEXT'] ?></a></li>

                   		 <?php endforeach; ?>
                    </ul>
					
					<?php endif; ?>

                </li>

				<?php endforeach; ?>

            </ul>

        </li>
</ul>
</div>

Не показывать пустые элементы в меню

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$this->setFrameMode(true);
?>

<?if (!empty($arResult)):?>
    <p class="menuH3">Каталог</p>
<ul id="menuCatalog">

<?
 

$previousLevel = 0;
$showElem = true;
foreach($arResult as $arItem):?>


 
	<?
	 
			// if($arItem['DEPTH_LEVEL']==1){
				if($arItem["PARAMS"]["UF_COUNT"]>0) $showElem = true; else $showElem = false;
			// }
		 
		if(!$showElem) continue;
		?>
		
	<?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="oneLi <?if ($arItem["SELECTED"]):?>selected<?endif?>"><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root selected<?else:?>root<?endif?>" <?/*onclick="return seeElement(this);"*/?>><?=fix_names($arItem["TEXT"])?></a>
				<ul>
		<?else:?>
			<li class="parent<?if ($arItem["SELECTED"]):?>  selected<?endif?>"><a href="<?=$arItem["LINK"]?>" class="parent<?if ($arItem["SELECTED"]):?>  selected<?endif?>" <?/*onclick="return seeElement(this);"*/?>><?=fix_names($arItem["TEXT"])?></a>
				<ul>
		<?endif?>
		
 

	<?else:?>

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

			<?if ($arItem["DEPTH_LEVEL"] >= 1):?>
				<li class="oneLi"><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=fix_names($arItem["TEXT"])?></a></li>
			<?else:?>
				<li <?if ($arItem["SELECTED"]):?>class="selected-punct"<?endif?>><a href="<?=$arItem["LINK"]?>" <?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><?=strtolower($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")?>"><?=fix_names($arItem["TEXT"])?></a></li>
			<?else:?>
				<li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=fix_names($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?>

Menu Component - uniqcle/Bitrix GitHub Wiki

Simple Menu

Multilevel Menu

Source

Упрощаем кастомизацию многоуровнего вертикального меню

Кастомизация горизонтального меню

Меню на основе разделов и элементов

Создать многоуровневое меню

Видео

Создание простого меню Битрикс.

МЕНЮ в 1С Битрикс. Урок 6.1 - Управление структурой

⚠️ GitHub.com Fallback ⚠️

Menu Component - uniqcle/Bitrix GitHub Wiki

Simple Menu

Multilevel Menu

Source

Упрощаем кастомизацию многоуровнего вертикального меню

Кастомизация горизонтального меню

Меню на основе разделов и элементов

Создать многоуровневое меню

Видео

Создание простого меню Битрикс.

МЕНЮ в 1С Битрикс. Урок 6.1 - Управление структурой

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️