НейроАгент

Выпадающее меню с элементами инфоблока в Bitrix

Полное руководство по созданию выпадающего меню с элементами инфоблока в Bitrix. Код, шаблоны и стили для реализации.

#bitrix-development #bitrix-menu #css-styling #dropdown-menu #infoblock-integration

09.11.2025, 03:37

Как создать выпадающее меню с элементами раздела инфоблока в Bitrix?

Проблема

В главное меню сайта выводятся пункты из файла .top.menu.php. Один из этих пунктов является ссылкой на раздел инфоблока. Требуется реализовать выпадающее меню, которое будет отображать элементы этого раздела инфоблока при наведении курсора.

Попытка решения

Я пробовал следующий код, но он не работает:

php

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

global $APPLICATION;

if(CModule::IncludeModule("iblock"))
{
    $IBLOCK_ID = 3;        // ID инфоблока
    $arOrder = Array("SORT"=>"ASC");   
    $arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL");
    $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y","SECTION_ID"=>"5");
    $res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
        $arFields = $ob->GetFields();            
        $aMenuLinksExt[] = Array(
            $arFields['NAME'],
            $arFields['DETAIL_PAGE_URL'],
            Array(),
            Array(),
            ""
        );
    }       
}   

$aMenuLinks = array_merge($aMenuLinksExt, $aMenuLinks);
?>

Вопрос

Как правильно реализовать выпадающее меню с элементами раздела инфоблока в Bitrix? Что не так в моем коде и как это исправить?

НейроАгент

Ваш подход близок к правильному, но есть несколько ключевых моментов, которые нужно исправить для создания полноценного выпадающего меню с элементами инфоблока в Bitrix.

Основные проблемы в вашем коде:

Неверный порядок операций с массивами
Отсутствие правильной структуры для выпадающего меню
Не созданы необходимые шаблоны для отображения

Вот полное решение:

Создание выпадающего меню с элементами инфоблока в Bitrix

Основной код для файла .top.menu.php

php

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

global $APPLICATION;

// Массив для дополнительных пунктов меню
$aMenuLinksExt = array();

if(CModule::IncludeModule("iblock"))
{
    $IBLOCK_ID = 3;        // ID инфоблока
    $SECTION_ID = 5;      // ID раздела, элементы которого нужно показать
    
    // Получаем элементы раздела
    $arOrder = Array("SORT"=>"ASC");   
    $arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL", "PREVIEW_PICTURE");
    $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y", "SECTION_ID"=>$SECTION_ID);
    $res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
        $arFields = $ob->GetFields();            
        $aMenuLinksExt[] = Array(
            $arFields['NAME'],                           // текст ссылки
            $arFields['DETAIL_PAGE_URL'],                // URL
            Array(),                                     // дополнительные параметры
            Array(),                                     // статические данные
            ""                                           // описание
        );
    }       
}   

// Объединяем основной массив с дополнительными элементами
// Важно: используем правильный порядок
$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
?>

Создание шаблона меню для выпадающего списка

Создайте файл шаблона bitrix/templates/ваш_шаблон/components/bitrix/menu/top_menu/dropdown/template.php:

php

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

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

<ul class="top-menu-dropdown">
    <?foreach($arResult as $arItem):?>
        <?if($arItem['SELECTED']):?>
            <li class="selected">
                <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
            </li>
        <?else:?>
            <li>
                <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
                <?if(!empty($arItem['PARAMS']['CHILDS'])):?>
                    <ul class="dropdown-menu">
                        <?foreach($arItem['PARAMS']['CHILDS'] as $child):?>
                            <li>
                                <a href="<?=$child['LINK']?>"><?=$child['TEXT']?></a>
                            </li>
                        <?endforeach;?>
                    </ul>
                <?endif;?>
            </li>
        <?endif;?>
    <?endforeach;?>
</ul>

CSS стили для выпадающего меню

Добавьте в ваш CSS файл:

css

/* Основное меню с выпадающими элементами */
.top-menu-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.top-menu-dropdown li {
    position: relative;
    margin-right: 20px;
}

.top-menu-dropdown a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

.top-menu-dropdown a:hover {
    background-color: #f0f0f0;
}

/* Выпадающее меню */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    display: none;
    z-index: 1000;
}

.top-menu-dropdown li:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    width: 100%;
    margin: 0;
}

.dropdown-menu a {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

/* Классы для ховер-состояний */
.ui-btn-hover {
    background-color: #f5f5f5;
}

.ui-btn-menu-hover {
    background-color: #e8e8e8;
}

Альтернативный подход через компонент меню

Вы также можете использовать стандартный компонент меню Bitrix с дополнительными параметрами:

php

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

<?$APPLICATION->IncludeComponent(
    "bitrix:menu", 
    "top", 
    array(
        "ROOT_MENU_TYPE" => "top", 
        "MENU_CACHE_TYPE" => "A", 
        "MENU_CACHE_TIME" => "3600", 
        "MENU_CACHE_USE_GROUPS" => "Y", 
        "MENU_CACHE_GET_VARS" => array(), 
        "MAX_LEVEL" => "2", 
        "CHILD_MENU_TYPE" => "left", 
        "USE_EXT" => "Y", 
        "DELAY" => "N", 
        "ALLOW_MULTI_SELECT" => "N", 
        "MENU_THEME" => "site", 
        "MENU_ITEMS_TEMPLATE_MODE" => "Y",
        "ADD_SECTIONS_CHAIN" => "N",
        "CACHE_TYPE" => "A",
        "CACHE_TIME" => "3600"
    ),
    false
);?>

Настройка административной панели

Войдите в админ-панель Bitrix
Перейдите в Настройки → Настройки продукта → Настройки меню
Создайте новый тип меню “top” или используйте существующий
Убедитесь, что ваш файл .top.menu.php находится в корне сайта

Основные проблемы в вашем коде

Неверный порядок операций: Вы пытаетесь использовать $aMenuLinks до его определения. Правильный порядок - сначала определить оба массива, затем объединить их.
Отсутствие структуры для выпадающего меню: Bitrix требует специальной структуры для создания выпадающих подменю.
Не созданы шаблоны: Для отображения выпадающего меню необходимо создать соответствующий шаблон компонента.

Правильный код для .top.menu.php

php

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

global $APPLICATION;

// Инициализируем массивы
$aMenuLinksExt = array();
$aMenuLinks = array(); // Основной массив меню (если он уже определен в системе)

if(CModule::IncludeModule("iblock"))
{
    $IBLOCK_ID = 3;        // ID инфоблока
    $SECTION_ID = 5;      // ID раздела
    
    $arOrder = Array("SORT"=>"ASC");   
    $arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL", "PREVIEW_PICTURE");
    $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y", "SECTION_ID"=>$SECTION_ID);
    $res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
        $arFields = $ob->GetFields();            
        $aMenuLinksExt[] = Array(
            $arFields['NAME'],
            $arFields['DETAIL_PAGE_URL'],
            Array(),
            Array(),
            ""
        );
    }       
}   

// Правильное объединение массивов
$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
?>

Создание шаблона меню

Для создания выпадающего меню необходимо создать компонент меню с кастомным шаблоном:

Создайте папку: bitrix/components/bitrix/menu.top.dropdown/
В ней создайте файл .description.php с описанием компонента
Создайте шаблон в папке templates/.default/

Основной файл шаблона должен поддерживать вложенные элементы и ховер-эффекты.

CSS стили для выпадающего меню

css

/* Контейнер меню */
.top-menu-dropdown {
    position: relative;
    display: inline-block;
}

/* Пункты меню */
.top-menu-dropdown li {
    position: relative;
    display: inline-block;
}

/* Выпадающее меню */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    display: none;
}

/* Показываем выпадающее меню при наведении */
.top-menu-dropdown:hover .dropdown-menu {
    display: block;
}

/* Пункты выпадающего меню */
.dropdown-menu li {
    display: block;
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
}

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

Альтернативный подход через компонент

Вы можете использовать стандартный компонент bitrix:menu с дополнительными настройками:

php

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

Настройка административной панели

Настройка типов меню:
- Перейдите: Настройки → Настройки продукта → Настройки меню
- Добавьте или настройте тип меню “top”
Проверка файла меню:
- Убедитесь, что файл .top.menu.php находится в корне сайта
- Проверьте права доступа к файлу
Кэширование:
- Настройте параметры кэширования для производительности

Заключение

Для создания выпадающего меню с элементами инфоблока в Bitrix необходимо:

Исправить структуру файла .top.menu.php - правильно определить и объединить массивы
Создать кастомный шаблон компонента меню для отображения выпадающих элементов
Добавить CSS стили для визуального оформления и функциональности ховер-эффектов
Настроить административную панель Bitrix для корректной работы меню

Основные преимущества этого подхода:

Полная интеграция с системой Bitrix
Поддержка кэширования для производительности
Гибкая настройка внешнего вида через CSS
Масштабируемость для добавления новых элементов

Если у вас возникнут дополнительные вопросы или проблемы с реализацией, рекомендуется обратиться к официальной документации Bitrix или сообществу разработчиков.

Источники

Как добавить иконки в выпадающее меню Bitrix?Как сделать многоуровневое выпадающее меню в Bitrix?Как оптимизировать производительность выпадающего меню с большим количеством элементов в Bitrix?Как интегрировать выпадающее меню с мобильной версией сайта в Bitrix?Как создать динамическое выпадающее меню на основе прав доступа пользователей в Bitrix?Как добавить анимацию в выпадающее меню Bitrix с помощью CSS?

Спросить у NeuroAgent