Como adicionar menu suspenso com cabeçalhos do Discourse

Suporte
1

Adicionei os menus de cabeçalho no Discourse usando componentes da API de plugins do Discourse. Mas não tenho ideia de como adicionar um menu suspenso com esses cabeçalhos.

É possível adicionar menus suspensos com os cabeçalhos do Discourse usando o plugin da API do Discourse ou outras formas?

Esperando uma saída como a abaixo,

Discourseheaders
Discourseheaders699×188 15.5 KB

2

Talvez você queira dar uma olhada neste componente de tema: Header Submenus. Ele permite criar um menu de cabeçalho com submenus. Você pode simplesmente usar esse componente ou analisá-lo como código de exemplo para criar seu próprio componente.

2 curtidas
3

Verifiquei o componente do seu tema.

Lá, os cabeçalhos e submenus são adicionados antes do cabeçalho do Discourse. Na verdade, esperamos que os cabeçalhos com submenus sejam adicionados aos cabeçalhos do Discourse, que marquei abaixo:

HeaderSubmenu
HeaderSubmenu552×232 17.9 KB

4

Resolvi esse problema usando a inserção de HTML personalizado através dos eventos da API do plugin Discourse.

Inicialmente, instalei o componente “Custom Header Links” e configurei os cabeçalhos como de costume. Em seguida, utilizei os eventos da API do Discourse para inserir o HTML personalizado no cabeçalho assim que os elementos DOM do cabeçalho fossem carregados, conforme mostrado abaixo:

api.onPageChange(url => {
    	if ($(".header-buttons").length != 0 && i == 0) {
            $('.custom-header-links .services-custom-header-links a').append("inserindo ícones");
            $(".header-buttons").prepend("adicionando elementos de tag ul");
            $(".resource-dropdown-menu").after("anexando o próximo elemento ul usando o nome da classe do primeiro elemento ul inserido");
            i++;
        }
    });

Aqui, você pode adicionar submenus aos elementos DOM do cabeçalho. No entanto, isso causa problemas de alinhamento. Precisamos manter o alinhamento por meio de CSS. Além disso, precisamos escrever uma função de clique para abrir o submenu e alterar a cor de fundo do cabeçalho, entre outras coisas. Obrigado :slight_smile:

5

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