How to display catalog sections in the top menu of Bitrix?

Question

1C-Bitrix

I don’t understand how to display the main sections of the catalog in the top menu and make it drop-down. Please explain step by step, because newbie in this business. The question was Googled, but I did not find any solution, everything is a little different.
Here: dev.alexkash.ru/ru
Or at least explain where to dig

Answer 1

Well, look, this is how I always implement it.
1) I create two types of menus. For example: "Top menu" and "Catalogue" (to create new menu types, you need to go to the settings and add new menu types in the structure settings.
2) I take a regular component of the bitrix:menu type, here is its template.php

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?>
<?$countMenu = 0;?>
<? if(!empty($arResult)): ?>
    <div class="top_menu">
    <ul class="menu" data-role="x-menu">
      <?
        $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="first_lvl_parent parent_li<? if($arItem["SELECTED"]): ?> first_lvl_selected<? endif; ?>" <?if($countMenu == 0):?>onmouseout="OutoverElement();"
   onmouseover="HoverElement();"<?endif?>><span class="parent_span"><a href="<?=$arItem["LINK"]?>" class="<? if($arItem["SELECTED"]): ?>root-item-selected<? else: ?>root-item<? endif; ?>"<?if($countMenu == 0):?>style="padding-left:0;"<?endif?> ><?if($countMenu == 0):?>
                  
                  <?$countMenu = 1;?>
                <?endif;?><div class="catmenu"><?=$arItem["TEXT"]?></div></a></span>
              <ul class="first_lvl" style="height:470px">
          <? else: ?>
            <li class="parent_li<? if($arItem["SELECTED"]): ?> item-selected<? endif; ?>">
              <span class="parent_span">
                <a href="<?=$arItem["LINK"]?>" class="parent">
                  <?=$arItem["TEXT"]?>
                </a>
                <i class="l_top"></i><i class="l_bt"></i>
              </span>
              <ul class="parent_lvl" >
                <li class="zap_top"></li>
                <li class="zap_bt"></li>
          <? endif; ?>
        <? else: ?>
          <? if($arItem["PERMISSION"] > "D"): ?>
            <? if($arItem["DEPTH_LEVEL"] == 1): ?>
              <li class="not_parent<? if($arItem["SELECTED"]): ?> first_lvl_selected<? endif; ?>"><span><a href="<?=$arItem["LINK"]?>" class="<? if($arItem["SELECTED"]): ?>root-item-selected<? else: ?>root-item<? endif; ?>"><?=$arItem["TEXT"]?></a></span></li>
            <? else: ?>
              <li<? if($arItem["SELECTED"]): ?> class="item-selected"<? endif; ?>><span><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></span></li>
            <? endif; ?>
          <? endif; ?>
        <? endif; ?>
        <? $previousLevel = $arItem["DEPTH_LEVEL"]; ?>
      <? endforeach; ?>
      <? if($previousLevel > 1): ?>
        <?=str_repeat("</ul></li>", ($previousLevel-1) );?>
      <? endif; ?>
    </ul>
  </div>
<? endif; ?>

3) I put in the component settings "Menu type for the first level: Top menu" - where I have only one item "Product catalog" with a link to the main page of the catalog.
4) In the component settings I set "Menu type for other levels: Catalog" (nesting level is optional.
5) Then I go to the root folder of the catalog. I have this site_address/catalog/ and add a new menu of the "Catalog" type to it. We save it.
6) I open this menu for editing in php mode and paste the following code instead of everything that is there:

<? 
  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" => "/katalog/",
    "SECTION_PAGE_URL" => "#SECTION_CODE_PATH#/",
    "DETAIL_PAGE_URL" => "#SECTION_CODE_PATH#/#ELEMENT_CODE#.html",
    "IBLOCK_TYPE" => "catalog", 
    "IBLOCK_ID" => "18",
    "DEPTH_LEVEL" => "2",
    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000"
  ),
  false
); 
  $aMenuLinks = array_merge($aMenuLinksExt, $aMenuLinks); 
?>

Should work.
Important! In paragraph 6, be sure to specify the correct
"IBLOCK_TYPE" => "catalog",
"IBLOCK_ID" => "18",
they have their own values, which ones? Look at your admin.