Come aggiungere un menu a discesa con le intestazioni di Discourse

Supporto
1

Ho aggiunto i menu di intestazione su Discourse utilizzando i componenti dell’API dei plugin di Discourse. Ma non ho idea di come aggiungere menu a discesa con queste intestazioni.

Possiamo aggiungere menu a discesa con le intestazioni di Discourse utilizzando il plugin API di Discourse o con altri metodi?

Mi aspetto un output simile al seguente,

Intestazioni di Discourse
Intestazioni di Discourse699×188 15.5 KB

2

Potresti dare un’occhiata a questo componente del tema: Header Submenus. Ti permette di creare un menu di intestazione con sottomenu. Puoi semplicemente utilizzare quel componente, oppure esaminarlo come codice di esempio su come creare il tuo componente.

3

Ho esaminato il componente del tuo tema.

Qui le intestazioni e i sottomenu vengono aggiunti prima dell’intestazione di Discourse. In realtà, ci aspettiamo che le intestazioni con i sottomenu vengano aggiunte alle intestazioni di Discourse, che ho evidenziato di seguito,

HeaderSubmenu
HeaderSubmenu552×232 17.9 KB

4

Ho risolto questo problema inserendo del codice HTML personalizzato tramite gli eventi dell’API dei plugin di Discourse.

Inizialmente, ho installato il componente “Custom Header Links” e configurato le intestazioni come di consueto. Successivamente, ho utilizzato gli eventi dell’API di Discourse per inserire HTML personalizzato nell’intestazione una volta caricati gli elementi DOM dell’intestazione, come mostrato di seguito:

api.onPageChange(url => {
    	if ($(".header-buttons").length != 0 && i == 0) {
            $('.custom-header-links .services-custom-header-links a').append("inserimento icone");
            $(".header-buttons").prepend("aggiunta elementi tag ul");
            $(".resource-dropdown-menu").after("aggiunta del prossimo elemento ul utilizzando il nome della classe del primo elemento ul inserito");
            i++;
        }
    });

In questo modo è possibile aggiungere sottomenu nel DOM dell’intestazione. Tuttavia, questo crea problemi di allineamento. Dovremo gestire l’allineamento tramite CSS. Inoltre, sarà necessario scrivere una funzione per l’evento click per aprire i sottomenu e modificare il colore di sfondo dell’intestazione, e così via. Grazie :slight_smile: