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.