Comment ajouter un menu déroulant avec les en-têtes Discourse

J’ai ajouté les menus d’en-tête sur Discourse en utilisant les composants de l’API des plugins Discourse. Cependant, je ne sais pas comment ajouter un menu déroulant avec ces en-têtes.

Est-il possible d’ajouter des menus déroulants aux en-têtes de Discourse en utilisant l’API des plugins Discourse ou d’autres méthodes ?

Voici le résultat attendu :

Vous voudrez peut-être jeter un coup d’œil à ce composant de thème : Header Submenus. Il vous permet de créer un menu d’en-tête avec des sous-menus. Vous pouvez soit utiliser ce composant tel quel, soit l’examiner comme exemple de code pour créer votre propre composant.

2 « J'aime »

J’ai examiné le composant de votre thème.

Les en-têtes et les sous-menus y sont ajoutés avant l’en-tête de Discourse. En réalité, nous nous attendons à ce que les en-têtes avec sous-menus soient ajoutés aux en-têtes de Discourse, que j’ai indiqués ci-dessous,

J’ai résolu ce problème en insérant du HTML personnalisé via les événements de l’API du plugin Discourse.

Initialement, j’ai installé le composant « Custom Header Links » et configuré les en-têtes comme d’habitude. Ensuite, j’ai utilisé les événements de l’API Discourse pour insérer du HTML personnalisé dans l’en-tête une fois que les éléments du DOM de l’en-tête sont chargés, comme ci-dessous :

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++;
        }
    });

Ici, vous pouvez ajouter des sous-menus dans le DOM de l’en-tête. Cela pose cependant un problème d’alignement. Nous devons gérer cet alignement via CSS. De plus, nous devons écrire une fonction de clic pour ouvrir les sous-menus et modifier la couleur de fond de l’en-tête, entre autres. Merci :slight_smile:

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