Sous-menus d'en-tête

[Discourse]

	Résumé	Header Submenus vous permet de créer un menu d’en-tête avec des sous-menus en utilisant du texte brut !
	Aperçu	Aperçu sur Discourse Theme Creator
	Lien du dépôt	https://github.com/discourse/discourse-header-submenus
	Nouveau sur les thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Étant donné qu’il s’agit d’un #composant_de_thème_officiel maintenu par l’équipe Discourse, les demandes de Support, Contribute > Bug, Contribute > UX et Contribute > Feature peuvent être faites dans les catégories respectives sur Meta, et marquées avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en créer un.

 Support  Bug [ UX](Discourse Meta “Discussion sur l’interface utilisateur de Header Submenus, et sur la présentation des fonctionnalités (y compris le langage et les éléments de l’interface)”  Fonctionnalité

Fonctionnalités

Bureau

Mobile

Paramètres

Nom	Description
Éléments du menu	Ajoutez des éléments de menu. Un élément par ligne dans cet ordre : Texte, icône, titre, affichage.
Éléments du sous-menu	Ajoutez des éléments de sous-menu. Un élément par ligne dans cet ordre : Parent, texte, icône, URL, cible, titre.
Icônes SVG	Incluez les classes d’icônes FontAwesome pour chaque icône utilisée dans les listes ci-dessus.
Mode fixe	Forcez l’affichage du menu en haut de l’écran quelle que soit la position de défilement — Bureau uniquement
Afficher la flèche	Affichez les icônes de flèche à côté des éléments du menu
Inverser la position	Affichez les éléments du menu du côté opposé de l’écran
Arrière-plan du menu	Couleur d’arrière-plan du 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)
Menu-item-active-background	Couleur d’arrière-plan des éléments du menu lorsqu’ils sont actifs. (hex, rgb, rgba ou nom de couleur CSS)
Menu-item-active-color	Couleur des éléments du menu lorsqu’ils sont actifs. (hex, rgb, rgba ou nom de couleur CSS)
Arrière-plan du sous-menu	Couleur d’arrière-plan des sous-menus. (hex, rgb, rgba ou nom de couleur CSS)
Couleur des éléments du sous-menu	Couleur pour les éléments du sous-menu. (hex, rgb, rgba ou nom de couleur CSS)
Arrière-plan au survol des éléments du sous-menu	Couleur d’arrière-plan des éléments du sous-menu au survol. (hex, rgb, rgba ou nom de couleur CSS)
Couleur au survol des éléments du sous-menu	Couleur des éléments du sous-menu au survol. (hex, rgb, rgba ou nom de couleur CSS)
Couleur du séparateur	Couleur des lignes de séparation dans les sous-menus. (hex, rgb, rgba ou nom de couleur CSS)

Il y a 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 délimité par des virgules par ligne dans cet ordre

   Texte, icône, titre, affichage

   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é.
   Affichage : choisissez sur quels appareils l’élément doit apparaître.

   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ 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 délimité par des virgules par ligne dans cet ordre

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

   Parent : le nom de l’élément de menu parent sous lequel cet élément de sous-menu doit apparaître. Utilisez la valeur texte de la liste ci-dessus.
   Texte : le texte qui s’affiche 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 ce lien 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 s’affiche 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, separator.

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

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

Je saisirais d’abord ceci comme un menu_item

Design, magic, Get inspired!, vdm

Puis je saisirais ceux-ci comme des é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, separator
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é par défaut avec un menu placeholder, alors jetez-y un œil et posez vos questions si vous en avez.

3. Options de mise en page.

   celles-ci 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.