Как добавить выпадающее меню с заголовками Discourse

Поддержка
1

Я добавил меню заголовков на Discourse, используя компоненты API плагинов Discourse. Но я не знаю, как добавить выпадающее меню с этими заголовками.

Можем ли мы добавить выпадающие меню с заголовками Discourse, используя плагин API Discourse или другими способами?

Ожидаемый результат выглядит так:

Discourseheaders
Discourseheaders699×188 15.5 KB

2

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

3

Я проверил ваш компонент темы.

Здесь заголовки и подменю добавлены перед заголовком Discourse. На самом деле мы ожидаем, что заголовки с подменю будут добавлены к заголовкам Discourse, которые я отметил ниже,

HeaderSubmenu
HeaderSubmenu552×232 17.9 KB

4

Я решил эту проблему, используя вставку пользовательского HTML через события API плагина Discourse.

Изначально я установил компонент «Custom Header Links» и настроил заголовки обычным образом. Затем я использовал события API Discourse для вставки пользовательского HTML в заголовок после загрузки элементов DOM заголовка, как показано ниже:

api.onPageChange(url => {
    	if ($(".header-buttons").length != 0 && i == 0) {
            $('.custom-header-links .services-custom-header-links a').append("вставка иконок");
            $(".header-buttons").prepend("добавление элементов тега ul");
            $(".resource-dropdown-menu").after("добавление следующего элемента ul с использованием имени класса первого вставленного элемента ul");
            i++;
        }
    });

Здесь вы можете добавить подменю в DOM заголовка. Однако это вызывает проблемы с выравниванием. Выравнивание необходимо корректировать через CSS. Также нужно написать функцию для обработки кликов, чтобы открывать подменю и изменять цвет фона заголовка и так далее. Спасибо :slight_smile: