 |
Summary | Header Submenus will allow you to build a header menu - with submenus - using plain text! |
 |
Preview | Preview on Discourse Theme Creator |
 |
Repository Link | https://github.com/discourse/discourse-header-submenus |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Features
Desktop
Mobile
Settings
| Name | Description |
|---|---|
| Menu items | Add menu items. One item per line in this order: Text, icon, title, view. |
| Submenu items | Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title. |
| Svg icons | Include FontAwesome icon classes for each icon used in the lists above. |
| Fixed mode | Force the menu to be visible at the top of the screen regardless of scroll position - Desktop only |
| Show caret | Show caret icons next to menu items |
| Invert position | Display menu items on the opposite side of the screen |
| Menu background | Background color for the menu. (hex, rgb, rgba or CSS color name) |
| Menu item color | Color for menu items. (hex, rgb, rgba or CSS color name) |
| Menu-item-active-background | Background color for menu items when active. (hex, rgb, rgba or CSS color name) |
| Menu-item-active-color | Color for menu items when active. (hex, rgb, rgba or CSS color name) |
| Submenu background | Background color for submenus. (hex, rgb, rgba or CSS color name) |
| Submenu item color | Color for submenu items. (hex, rgb, rgba or CSS color name) |
| Submenu item hover background | Background color for submenus items when hovered. (hex, rgb, rgba or CSS color name) |
| Submenu item hover color | Color for submenus items when hovered. (hex, rgb, rgba or CSS color name) |
| Divider color | Color for divider lines in submenus. (hex, rgb, rgba or CSS color name) |
There are four groups of settings
-
Menu items
Enter the items you want to appear on the menu. One comma-delimited item per line in this order
Text, icon, title, viewText: what appears on the menu.
Icon: the icon displayed next to the item. If you do not want to use an icon, usenone.
Title: the text that appears when the item is hovered.
View: Choose what devices the item appears on.
vdmappears on both desktop and mobile
vdoappears on desktops only,
vmoappears on mobiles only.Due to lack of space, it is not recommended to add more than 3-4 items on mobile.
-
Submenu items
Enter a list of the submenu items you want to add to your menu. One comma-delimited item per line in this order
Parent, text, icon, URL, target, titleParent: the name of the parent menu item which this submenu item should show under. Use the
textvalue from the list above.
Text: the text that shows for this submenu item.
Icon: the icon for this submenu item, usenoneif no icon is needed.
URL: the path this menu item links to. You can use relative paths as well.
Target: Choose whether this item will open in a new tab or in the same tab. Useblankto open the link in a new tab, or useselfto open it in the same tab.
Title: the text that shows when the item is hovered.
Dividers: You can also add dividers between submenu items. To add a divider useparent, divider.
Here’s a quick example to cover points 1 and 2 above:
Let’s say I want to add a menu item called Design and add a few items to its submenu like so
I would first enter this as a menu_item
Design, magic, Get inspired!, vdm
And then enter these as sub_menu items
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!
That’s it!
The theme comes with a placeholder menu by default, so have a look at that and ask if you have questions.
-
Layout options.
these are pretty self-explanatory
-
Color options
These are empty by default, but if you add a color here, it will override the component’s defaults which are based on the current color scheme.
Last edited by @JammyDodger 2024-06-12T21:46:41Z
Check document
Perform check on document:
Большое спасибо!
