How to add dropdown menu with discourse headers

support
1

I have added the header menus on discourse using discourse plugin API components. But i have no idea about adding dropdown menu with those headers.

Can we able to add dropdown menus with discourse headers using discourse api plugin or any other ways ?

Expecting output like below,

Discourseheaders
Discourseheaders699Ă—188 15.5 KB

2

You might want to have a look at this theme component: Header submenus. It allows you to build a header menu with submenus. You could either just use that component, or have a look at it as example code of how to create your own component.

2 Likes
3

I have checked your theme component.

There the headers and submenus are added before the discourse header. Actually we are expecting the headers with submenus should added to discourse headers which I marked below,

HeaderSubmenu

4

I have solved this issue using some custom html insertion through discourse plugin api events.

So, Initially I have installed “Custom Header Links” component and configure the headers as usual. Then I have used discourse api events to insert the custom html on header once the header DOM elements is loaded like below,

api.onPageChange(url => {
    	if($(".header-buttons").length != 0 && i == 0) {
            $('.custom-header-links .services-custom-header-links a').append("inserting icons");
            $(".header-buttons").prepend("adding ul tag elements");
            $(".resource-dropdown-menu").after("appending next ul element using first inserted ul element class name");
            i++;
        }
    });

Here you can able to add the submenus into headers DOM. But it makes alignment issue. We should carry over the alignment through CSS. Also, we have to write click function to open submenu and changing the background color header like that. Thanks :slight_smile:

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.