标题子菜单

:discourse2: 摘要 Header Submenus 允许您使用纯文本构建带有子菜单的头部菜单!
:eyeglasses: 预览 在 Discourse Theme Creator 上预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/discourse-header-submenus
:open_book: 初次使用 Discourse 主题? Discourse 主题使用新手指南

安装此主题组件

功能

桌面端

移动端

设置

名称 描述
菜单项 添加菜单项。每行一个项目,顺序为:文本、图标、标题、视图。
子菜单项 添加子菜单项。每行一个项目,顺序为:父级、文本、图标、URL、目标、标题。
SVG 图标 为上述列表中使用的每个图标包含 FontAwesome 图标类。
固定模式 强制菜单始终显示在屏幕顶部,无论滚动位置如何 - 仅限桌面端
显示箭头 在菜单项旁边显示箭头图标
反转位置 在屏幕的另一侧显示菜单项
菜单背景 菜单的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
菜单项颜色 菜单项的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
菜单项活动背景 菜单项处于活动状态时的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
菜单项活动颜色 菜单项处于活动状态时的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
子菜单背景 子菜单的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
子菜单项颜色 子菜单项的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
子菜单项悬停背景 子菜单项悬停时的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
子菜单项悬停颜色 子菜单项悬停时的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)
分隔线颜色 子菜单中分隔线的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称)

共有四组设置

  1. 菜单项

    输入您希望出现在菜单上的项目。每行一个逗号分隔的项目,顺序如下

    文本, 图标, 标题, 视图

    文本:菜单上显示的内容。
    图标:项目旁边显示的图标。如果您不想使用图标,请使用 none
    标题:鼠标悬停在项目上时显示的文本。
    视图:选择项目显示的设备。

    ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm 同时出现在桌面端和移动端
    ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo 仅出现在桌面端,
    ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo 仅出现在移动端。

    由于空间有限,不建议在移动端添加超过 3-4 个项目。

  2. 子菜单项

    输入您希望添加到菜单的子菜单项列表。每行一个逗号分隔的项目,顺序如下

    父级, 文本, 图标, URL, 目标, 标题

    父级:此子菜单项应显示在其下方的父菜单项的名称。使用上述列表中的 文本 值。
    文本:此子菜单项显示的文本。
    图标:此子菜单项的图标,如果不需要图标,请使用 none
    URL:此菜单项链接到的路径。您也可以使用相对路径。
    目标:选择此项是在新标签页中打开还是在同一标签页中打开。使用 blank 在新标签页中打开链接,或使用 self 在同一标签页中打开。
    标题:鼠标悬停在项目上时显示的文本。
    分隔线:您还可以在子菜单项之间添加分隔线。要添加分隔线,请使用 父级, divider

以下是一个涵盖上述第 1 点和第 2 点的快速示例:

假设我想添加一个名为 Design 的菜单项,并向其子菜单添加一些项目,如下所示

我首先将其作为 menu_item 输入

Design, magic, Get inspired!, vdm

然后将这些作为 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!

就是这样!

主题默认带有一个占位符菜单,请查看该菜单,如果您有问题请随时提问。

  1. 布局选项。

    这些选项不言自明

  2. 颜色选项

    这些选项默认为空,但如果您在此处添加颜色,它将覆盖基于当前配色方案的组件默认值。


:discourse2: 由我们托管? 主题组件在我们的 Standard、Business 和 Enterprise 计划中均可使用。

90 个赞