Sous-menus d'en-tête

[Discourse]

	Résumé	Les Sous-menus d’en-tête vous permettent de créer un menu d’en-tête avec des sous-menus en utilisant du texte simple !
	Aperçu	Aperçu sur le Créateur de thèmes Discourse
	Lien vers le dépôt	https://github.com/discourse/discourse-header-submenus
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Comme il s’agit d’un #composant de thème #officiel maintenu par l’équipe Discourse, les demandes de Support, de bug, d’expérience utilisateur (ux) et de #fonctionnalité peuvent être soumises dans les catégories respectives ici sur Meta, et étiquetées avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en démarrer un.

 Support  Bug  UX  Fonctionnalité

Fonctionnalités

Bureau

Mobile

Paramètres

Nom	Description
Éléments du menu	Ajouter des éléments de menu. Un élément par ligne dans cet ordre : Texte, icône, titre, vue.
Éléments du sous-menu	Ajouter des éléments de sous-menu. Un élément par ligne dans cet ordre : Parent, texte, icône, URL, cible, titre.
Icônes SVG	Inclure les classes d’icônes FontAwesome pour chaque icône utilisée dans les listes ci-dessus.
Mode fixe	Forcer le menu à rester visible en haut de l’écran quelle que soit la position de défilement - Bureau uniquement
Afficher la flèche	Afficher les icônes de flèche à côté des éléments du menu
Inverser la position	Afficher les éléments du menu du côté opposé de l’écran
Arrière-plan du menu	Couleur d’arrière-plan pour le menu. (hex, rgb, rgba ou nom de couleur CSS)
Couleur des éléments du menu	Couleur pour les éléments du menu. (hex, rgb, rgba ou nom de couleur CSS)
Arrière-plan-élément-menu-actif	Couleur d’arrière-plan pour les éléments du menu lorsqu’ils sont actifs. (hex, rgb, rgba ou nom de couleur CSS)
Couleur-élément-menu-actif	Couleur pour les éléments du menu lorsqu’ils sont actifs. (hex, rgb, rgba ou nom de couleur CSS)
Arrière-plan sous-menu	Couleur d’arrière-plan pour les sous-menus. (hex, rgb, rgba ou nom de couleur CSS)
Couleur élément sous-menu	Couleur pour les éléments du sous-menu. (hex, rgb, rgba ou nom de couleur CSS)
Arrière-plan survol élément sous-menu	Couleur d’arrière-plan pour les éléments du sous-menu au survol. (hex, rgb, rgba ou nom de couleur CSS)
Couleur survol élément sous-menu	Couleur pour les éléments du sous-menu au survol. (hex, rgb, rgba ou nom de couleur CSS)
Couleur séparateur	Couleur pour les lignes de séparation dans les sous-menus. (hex, rgb, rgba ou nom de couleur CSS)

Il existe quatre groupes de paramètres

1. Éléments du menu

   Saisissez les éléments que vous souhaitez voir apparaître dans le menu. Un élément séparé par des virgules par ligne dans cet ordre

   Texte, icône, titre, vue

   Texte : ce qui apparaît dans le menu.
   Icône : l’icône affichée à côté de l’élément. Si vous ne souhaitez pas utiliser d’icône, utilisez none.
   Titre : le texte qui apparaît lorsque l’élément est survolé.
   Vue : choisissez sur quels appareils l’élément apparaît.

   vdm apparaît à la fois sur le bureau et sur mobile
   vdo apparaît uniquement sur les ordinateurs de bureau,
   vmo apparaît uniquement sur les mobiles.

   En raison du manque d’espace, il n’est pas recommandé d’ajouter plus de 3 à 4 éléments sur mobile.

2. Éléments du sous-menu

   Saisissez une liste des éléments de sous-menu que vous souhaitez ajouter à votre menu. Un élément séparé par des virgules par ligne dans cet ordre

   Parent, texte, icône, URL, cible, titre

   Parent : le nom de l’élément du menu parent sous lequel cet élément de sous-menu doit s’afficher. Utilisez la valeur texte de la liste ci-dessus.
   Texte : le texte affiché pour cet élément de sous-menu.
   Icône : l’icône pour cet élément de sous-menu, utilisez none si aucune icône n’est nécessaire.
   URL : le chemin vers lequel cet élément de menu pointe. Vous pouvez également utiliser des chemins relatifs.
   Cible : choisissez si cet élément s’ouvrira dans un nouvel onglet ou dans le même onglet. Utilisez blank pour ouvrir le lien dans un nouvel onglet, ou self pour l’ouvrir dans le même onglet.
   Titre : le texte qui apparaît lorsque l’élément est survolé.
   Séparateurs : Vous pouvez également ajouter des séparateurs entre les éléments du sous-menu. Pour ajouter un séparateur, utilisez parent, divider.

Voici un exemple rapide pour couvrir les points 1 et 2 ci-dessus :

Disons que je veux ajouter un élément de menu appelé Design et ajouter quelques éléments à son sous-menu comme ceci

Je saisis d’abord ceci comme un menu_item

Design, magic, Get inspired!, vdm

Puis je saisis ceci comme éléments sub_menu

Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!

C’est tout !

Le thème est livré avec un menu fictif par défaut, alors jetez un coup d’œil et posez des questions si nécessaire.

3. Options de mise en page.

   Elles sont assez explicites

   

4. Options de couleur

   Elles sont vides par défaut, mais si vous ajoutez une couleur ici, elle remplacera les valeurs par défaut du composant, qui sont basées sur le schéma de couleurs actuel.

Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Standard, Business et Enterprise.

[Johani (Joe)]

Je viens de pousser une mise à jour pour ce composant.

DEV: v2 (#8)

Il n’y a aucun changement visuel et, si vous avez ajouté du CSS personnalisé à votre thème, cela devrait toujours fonctionner car le composant conserve les mêmes classes.

J’ai supprimé la bibliothèque externe que le composant utilisait précédemment, et par conséquent jQuery. J’ai parcouru les problèmes signalés ici, corrigé celui que j’ai pu reproduire, puis supprimé les réponses pour garder l’ensemble organisé. Si votre problème persiste toujours après la mise à jour, n’hésitez pas à le signaler.

Au-delà de cela, la mise à jour ajoute une seule nouvelle fonctionnalité : les sous-menus s’afficheront désormais au survol sur ordinateur de bureau, au lieu de nécessiter un clic.

[davidkingham]

Bonne mise à jour, Joe ! J’ai seulement rencontré deux problèmes sur mobile.

1. Vous ne pouvez plus faire défiler horizontalement si vous avez beaucoup d’éléments de menu.
2. Lorsque vous appuyez sur un élément dans le menu déroulant, celui-ci reste ouvert.

[Johani (Joe)]

@davidkingham

Vous ne pouvez plus faire défiler horizontalement si vous avez beaucoup d’éléments de menu.

Cela devrait encore fonctionner, mais uniquement dans la vue mobile. Donc, si vous le testez simplement avec la vue mobile simulée du navigateur sans changer l’agent utilisateur, cela ne fonctionnera pas. Pouvez-vous confirmer que vous effectuez ce test sur un véritable téléphone ? Si oui, pourriez-vous me préciser quel appareil et quel navigateur vous utilisez ?

@davidkingham

Lorsque vous appuyez sur un élément dans la liste déroulante, celle-ci reste ouverte.

Je constate également ce problème. La raison en est que tout le comportement d’ouverture et de fermeture des listes déroulantes est désormais géré par le CSS plutôt que par le JavaScript. Je ne pense pas que le CSS permette de fermer automatiquement la liste déroulante après un clic. Nous devons donc recourir au JavaScript pour ce problème spécifique. Je m’en occuperai une fois que vous aurez confirmé le problème de défilement sur mobile.

[davidkingham]

C’est sur un iPhone 8 avec l’application Discourse, pareil dans Safari. Merci Joe !

[davidkingham]

Une nouvelle à ce sujet, Joe ? Merci !

[fidelio]

Sur le site communautaire Sponge, ils ont une belle intégration de cela dans l’en-tête principal plutôt qu’une couche supplémentaire en haut :

Sponge Forums

Comment cela peut-il être réalisé ? Nous aimerions beaucoup cela pour notre site.

[AntiMetaman]

Les sous-menus sont-ils possibles pour les liens d’en-tête ? Ce composant de thème ajoute un nouveau menu au-dessus de l’en-tête, mais certaines personnes ne souhaitent pas de nouveau menu de navigation. Elles veulent simplement pouvoir survoler les liens d’en-tête actuels et afficher des sous-menus.

[Hugh_Roberts]

C’est sympa. Je me demande comment ils ont fait.

[ElForoViajero]

Quelqu’un rencontre-t-il ce problème ? Les icônes des réseaux sociaux ne fonctionnent plus (elles fonctionnaient auparavant) et même en utilisant une autre police d’icônes FontAwesome, elles ne s’affichent pas.

[davidkingham]

Avez-vous essayé le préfixe fab, car ce sont des marques et elles doivent avoir ce préfixe.

[ElForoViajero]

Merci pour votre réponse @davidkingham. J’ai ajouté le préfixe fab, mais le logo n’apparaît pas.

[Steven]

N’oubliez pas de modifier les icônes dans la liste des liens également ; vous devez inclure le préfixe fab- dans ces icônes.

[ElForoViajero]

Bingo ! C’est ça Merci beaucoup !

[Sentinelrv]

Bonjour, je ne sais pas pourquoi, mais le paramètre “Menu-item-active-background” ne semble pas fonctionner correctement. Je pense qu’il devrait simplement changer la couleur de fond du menu au survol, mais la couleur sélectionnée recouvre complètement le texte. Voir ici…

De plus, le paramètre juste en dessous, “Menu-item-active-color”, ne semble avoir aucun effet. J’ai essayé différents codes de couleur, mais rien ne change lorsque je teste.

Des idées ?

[Moksh]

J’aimerais placer les sous-menus sous l’en-tête du site au lieu de les avoir en haut. Pourriez-vous m’indiquer comment faire ? Un extrait de code serait la bienvenue

[Moksh]

@Johani

@davidkingham

1. Lorsque vous appuyez sur un élément dans la liste déroulante, celle-ci reste ouverte

Je constate la même chose. La raison en est que tout le comportement d’ouverture/fermeture des listes déroulantes est désormais géré par le CSS plutôt que par le JavaScript. Je ne pense pas que le CSS permette de gérer la fermeture automatique de la liste après un clic. Nous devons donc revenir au JavaScript pour ce problème précis. Je le ferai après que vous m’aurez confirmé le problème de défilement sur mobile.

@Johani @davidkingham Avez-vous trouvé une solution à ce problème « Lorsque vous appuyez sur un élément dans la liste déroulante, celle-ci reste ouverte » ?

Merci

[davidkingham]

Non, cela se comporte toujours ainsi. Une solution potentielle serait d’afficher uniquement des icônes sur mobile, sans texte. Qu’en pensez-vous ?

[Moksh]

Comment l’affichage de simples icônes sur mobile résout-il le problème ? « Lorsque vous touchez un élément dans le menu déroulant, celui-ci reste ouvert »

[Moksh]

@ElForoViajero Vos sous-menus semblent fonctionner correctement à la fois sur ordinateur et sur mobile. Dès que vous cliquez sur un élément du menu, l’écran se rafraîchit et le menu se ferme automatiquement. Avez-vous dû faire quelque chose de spécial ?

RTP SLOT- Info Bocoran RTP Slot Pragmatic Play Hari Ini Winrate Tertinggi