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 ?
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.
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