| 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
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
-
É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, affichageTexte : 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, utiliseznone.
Titre : le texte qui apparaît lorsque l’élément est survolé.
Affichage : choisissez sur quels appareils l’élément doit apparaître.
vdmapparaît à la fois sur le bureau et sur mobile
vdoapparaît uniquement sur les ordinateurs de bureau,
vmoapparaî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.
-
É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, titreParent : le nom de l’élément de menu parent sous lequel cet élément de sous-menu doit apparaître. Utilisez la valeur
textede 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, utiliseznonesi 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. Utilisezblankpour ouvrir le lien dans un nouvel onglet, ouselfpour 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, utilisezparent, 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.
-
Options de mise en page.
celles-ci sont assez explicites
-
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.







