Разработка модулей для Битрикс. Глобальное меню

Глобальным в админке Битрикса называется левое верхнее меню с кнопками «Контент» и «Настройки» в версии «Старт». В самых дорогих версиях меню содержит ещё пункты «Сервисы», «Магазин» и «Веб-аналитика».

В это меню можно добавлять свои пункты, что мы и попробуем сделать в этом посте.

В первую очередь нам нужно добавить в файл /bitrix/php_interface/init.php следующий триггер (наш модуль называется «Техподдержка сайтов»):

AddEventHandler("main", "OnBuildGlobalMenu", "AddGlobalMenuItem");
function AddGlobalMenuItem() 
{
        $arr = array(
            "global_menu_websites_support" => array(
                "icon" => "button_websites_support",
		"page_icon" => "page_websites_support",
		"index_icon" => "index_websites_support",
		"text" => 'Техподдержка сайтов',
		"title" => 'Техподдержка сайтов',
		"url" => "websites_support_main.php?lang=".LANGUAGE_ID,
		"sort" => 500,
		"items_id" => "global_menu_websites_support",
		"help_section" => "settings",
		"items" => array()
	));
    return $arr;
}

Как видите, основная информация здесь про иконку. Ключи массива, которые следует пояснить , - page_icon и index_icon. Как ни странно, но это ID div'-ов, на фоне которых будет стоять нужная нам иконка. Сам же путь до картинок нужно прописать в файле /bitrix/themes/.default/websites_support.css :

#button_websites_support {background-image:url(icons/websites_support/button_websites_support.png);}
#page_websites_support {background-image:url(icons/websites_support/page_websites_support.png);}
#index_websites_support {background-image:url(icons/websites_support/index_websites_support.png);}

Теперь посмотрим, как сделать подпункты нашего меню. Для этого идём в файл меню нашего модуля (/bitrix/modules/websites_support/admin/menu.php) и добавляем туда следующий код:

IncludeModuleLangFile(__FILE__);
$aMenu[] = array(
	"parent_menu" => "global_menu_websites_support",
	"section" => "websites_support",
	"sort" => 100,
	"url" => "websites_support_clients_list.php",
	"text" => 'Клиенты',
	"title" => 'Клиенты',
	"icon" => "websites_support_menu_icon_clients",
	"page_icon" => "websites_support_page_icon_clients",
	"module_id" => "websites_support",
	"items_id" => "menu_websites_support",
);
$aMenu[] = array(
	"parent_menu" => "global_menu_websites_support",
	"section" => "websites_support",
	"sort" => 200,
	"url" => "websites_support_workmans_list.php",
	"text" => 'Сотрудники',
	"title" => 'Сотрудники',
	"icon" => "websites_support_menu_icon_workmans",
	"page_icon" => "websites_support_page_icon_workmans",
	"module_id" => "websites_support",
	"items_id" => "menu_websites_support",
);
$aMenu[] = array(
	"parent_menu" => "global_menu_websites_support",
	"section" => "websites_support",
	"sort" => 300,
	"url" => "websites_support_tasks_list.php",
	"text" => 'Обращения',
	"title" => 'Обращения',
	"icon" => "websites_support_menu_icon_tasks",
	"page_icon" => "websites_support_page_icon_tasks",
	"module_id" => "websites_support",
	"items_id" => "menu_websites_support",
);
return $aMenu;

В ключе parent_menu каждого пункта указано, что родительским является созданное нами глобальное меню. Осталось только прописать пути до иконок подпунктов. Как вы уже догадались, их нужно добавить в тот же файл /bitrix/themes/.default/websites_support.css :

#websites_support_menu_icon_clients {background-image:url(icons/websites_support/websites_support_clients_18_x_18.png);}
#websites_support_page_icon_clients {background-image:url(icons/websites_support/websites_support_clients_32_x_32.png);}

#websites_support_menu_icon_workmans {background-image:url(icons/websites_support/websites_support_workmans_18_x_18.png);}
#websites_support_page_icon_workmans {background-image:url(icons/websites_support/websites_support_workmans_32_x_32.png);}

#websites_support_menu_icon_tasks {background-image:url(icons/websites_support/websites_support_tasks_18_x_18.png);}
#websites_support_page_icon_tasks {background-image:url(icons/websites_support/websites_support_tasks_32_x_32.png);}

В итоге получаем вот такой результат: