汉堡开关

您好,我是Discourse的新用户,希望这是一个有用的观察——汉堡菜单从未变成“关闭”界面,所以我发现自己点击它,以为我要揭示更多内容,但它却意外地关闭了。它已经打开了。我有一些CSS代码,计划在拥有更多访问权限时将其作为一个主题添加到“主题组件”类别中。幸运的是,代码库有正确的类,因此我们可以根据侧边栏是否显示来挂接它们。

discourse-hamburger-toggle

.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle  svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}
4 个赞

谢谢!我也建议将“X 关闭”按钮移到菜单内部,放在最顶部。(在该位置,我也会在按钮上添加“关闭菜单”文本,并可能使用指向左侧的箭头而不是 X。)

← 关闭菜单« 关闭菜单

4 个赞

我认为大多数人使用 Discourse 时侧边栏始终是启用的(我很想看看各种论坛的统计数据)。有一个很大的 X 鼓励用户关闭布局的一部分,这对于许多用户来说基本上是永久性的,这对我来说有点奇怪。:thinking:

3 个赞

我同意,使用很少使用的汉堡包到关闭图标占据窗口最宝贵的左上角易于目标空间并非最佳。

以下是 Cloudflare 在其侧边栏底部的内容:

看起来比我更了解 CSS(或者可能是 DOM?)的人可以很快地创建一个主题组件,但这可能是一个修复模板的 PR。

它甚至可以是侧边栏中的第一个项目。。。

3 个赞

如果按钮在折叠的侧边栏中,该如何再次打开它?

2 个赞

哎呀!
你说得很有道理!
我可没说过我是用户体验专家。
. . . 嗯 . . . 好的
他们会像这样折叠侧边栏:


然后底部的那个东西会展开它。
所以,也许折叠侧边栏而不是移除它是一个解决方案。这样,如果你知道图标/颜色代表什么,你就可以在不展开它的情况下使用它。
几乎所有的网站都把主页/图标放在左上角,把汉堡包放在那里似乎不对。

3 个赞

我知道这是另一回事,但我怀疑汉堡包图标在移动设备上仍然在右上角,因为在小型触摸屏上,如果它像桌面视图一样位于左上角,意外点击徽标可能会很常见。尽管将其放置在头像和搜索图标附近也可能如此。:woman_shrugging:t2:

1 个赞

是的,这很有道理。我认为 Gmail 也有类似的,尽管他们将汉堡包按钮保留在左上角:

2 个赞

使用此主题,您可以看到汉堡包位于侧边栏上,因此它不算在左上角:

2 个赞

FWIW 我更喜欢左上角用于用户体验设计的平衡和外观,并且对其打开-折叠功能没有异议。

1 个赞

我以前没有真正玩过它,但它也有一个“悬停时展开”的功能,这很不错。

我认为它们有一套更独特的图标,这使得在折叠时更容易辨认,比第一眼看 Meta 的图标要容易。不过,如果你开始添加诸如多个标签之类的内容,它就会遭受与我们的标签可能具有的相同的歧义:

1 个赞

不使用悬停标签和类别名称。悬停对于触摸屏界面来说也不是理想的选择。在 iPad 上使用带有悬停功能的桌面模式效果不佳。

1 个赞

我喜欢悬停效果,只要屏幕点击与鼠标操作行为一致即可。

这是我最喜欢的样式之一,在一个为客户高度定制的 Ghost CMS 网站上,将鼠标悬停在侧边栏的任何位置都会滑出垂直堆叠的可点击/可触摸链接,从而显示级联子菜单……感觉非常流畅且易于导航。您可以在此处进行尝试:

你在手机上检查过这个吗?非常卡顿

你好 :wave: 谢谢分享。

我在我的网站上使用缩进、出缩进图标组合来切换侧边栏。

缩进(显示侧边栏)
indent-solid

出缩进(隐藏侧边栏)
outdent-solid

2 个赞

另一种可能性(适用于桌面版)在 Flarum 上有所演示……

我想知道是否有人认为核心团队需要处理这个问题。

由于这个原因,许多顶级社区在 Discourse 上使用之前的 UI(没有侧边栏)。

我觉得侧边栏对于组织我们这样的大型社区非常有用,但 Discourse 目前的行为恰恰相反。

感觉非技术人员就是因为这样一些微小但重要的细节而不知道如何使用我们的论坛。

总有改进的空间 :slight_smile:

与此同时,我正在测试这个主题组件:

2 个赞

我也有同样的问题