标题子菜单

:discourse2: 摘要 标题子菜单 允许您使用纯文本构建带有子菜单的标题菜单!
:eyeglasses: 预览 在 Discourse 主题创建器中预览
: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 点:

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

我首先将其作为 menu_item 输入:

设计,magic,获得灵感!, vdm

然后将这些作为 sub_menu 项输入:

设计,画廊,th,#,blank,供您欣赏的精彩画廊。
设计,设计流程,lightbulb-o,#,blank,学习基础知识。
设计,博客设计,columns,#,blank,什么构成了优秀博客?
设计,divider
设计,免费资源,gift,#,blank,大家都喜欢免费资源!
设计,Photoshop 教程,book,#,blank,初学者的 Photoshop。
设计,设计趋势,bar-chart,#,blank,紧跟当前趋势!

就是这样!

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

  1. 布局选项。

    这些选项非常直观

  2. 颜色选项

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


:discourse2: 由我们托管? 主题组件可在我们的标准版、商业版和企业版计划中使用。

90 个赞

我刚刚为这个组件推送了一个更新。

没有视觉上的变化,如果您在主题中添加了自定义 CSS,它仍然可以正常工作,因为该组件仍保留相同的类名。

我移除了该组件之前使用的外部库,同时也移除了 jQuery。我查看了在此处报告的问题,修复了能够复现的问题,并删除了相关回复以保持整洁。如果您的问题在更新后仍然存在,欢迎随时发帖反馈。

除此之外,此次更新仅增加了一个新功能:在桌面端,子菜单现在会在鼠标悬停时显示,而不再需要点击。

14 个赞

不错的更新,Joe。我在移动设备上只遇到了两个问题。

  1. 如果菜单项很多,您将无法左右滚动。
  2. 点击下拉菜单中的某一项时,下拉菜单仍然保持打开状态。
2 个赞

应该仍然有效,但仅限于移动视图。因此,如果您只是在浏览器中模拟移动视图(而不更改用户代理)进行测试,它将无法工作。能否请您确认您是在真实的手机上进行此测试?如果是,能否告知您使用的设备/浏览器?

我也看到了这个问题。原因是所有下拉菜单(打开/关闭)的行为现在都由 CSS 处理,而不是 JavaScript。我认为 CSS 无法处理点击后自动关闭下拉菜单的情况。因此,针对该特定问题,我们必须回退到使用 JavaScript。在您确认移动端的滚动问题后,我会处理此事。

2 个赞

这是在 iPhone 8 上的 Discourse 应用,Safari 浏览器中也是如此。谢谢 Joe!

2 个赞

Joe,这有什么更新吗?谢谢!

在 Sponge 社区网站上,他们巧妙地将此功能集成到了主标题栏中,而不是在顶部添加额外的层级:

如何实现这一点?我们的网站也很希望能做到这样。

4 个赞

能否为页眉链接添加子菜单?此主题组件会在页眉上方添加一个新菜单,但有些人并不想要新的导航菜单。他们只希望将鼠标悬停在当前的页眉链接上时能显示子菜单。

5 个赞

这很不错。我想知道他们是怎么做到的。

1 个赞

有人遇到这个问题吗?社交媒体图标无法显示(之前是正常的),即使更换了不同的字体图标(FA)也无法显示。

1 个赞

您尝试过使用 fab 前缀吗?由于这些是品牌名称,因此需要添加此前缀。

1 个赞

谢谢你的回复 @davidkingham。我添加了前缀 fab,但图标没有显示。

1 个赞

别忘了同时编辑链接列表中的图标,这些图标必须包含 fab- 前缀。

4 个赞

Bingo!就是它 :slight_smile: 非常感谢!

2 个赞

你好,我不太清楚原因,但设置“Menu-item-active-background”似乎没有正常工作。我认为它应该只是在我悬停时更改菜单的背景色,但选中的颜色完全覆盖了文字。请看这里…

另外,它下面的设置“Menu-item-active-color”似乎没有任何作用。我尝试了不同的颜色代码,但在测试时没有任何变化。

有什么建议吗?

2 个赞

我想把子菜单放在站点标题下方,而不是顶部。请问该如何操作?如果能提供一段代码示例就更好了::folded_hands:

1 个赞

@Johani @davidkingham 你们找到解决“点击下拉菜单中的项目时,下拉菜单保持打开状态”这个问题的方法了吗?

谢谢

1 个赞

不,它仍然表现得如此。一个可能的解决方案是在移动设备上仅显示图标而不显示文字,您怎么看?

1 个赞

在移动设备上仅显示图标如何解决该问题?“点击下拉菜单中的项目时,下拉菜单会保持打开状态”

1 个赞

@ElForoViajero 您的子菜单在桌面端和移动端似乎都能正常运行。一旦点击菜单项,屏幕会刷新,菜单也会自动关闭。您是否做了什么特殊设置?

1 个赞