侧边栏标题换行和滚动

用户体验
1

我不特别喜欢这样。导航侧边栏处于下拉模式：

IMG_3301
IMG_3301633×399 77.7 KB

另外，在下拉模式下，菜单很容易出现滚动条，即使还有桌面屏幕空间可以展开而不出现滚动条。这个可以修复吗？

menu
menu391×679 42.7 KB

我的用户想要下拉侧边栏而不是展开的侧边栏，因为它更像旧的遗留汉堡菜单并且在右侧。

而且为什么“所有”都包含“新”和“未读”？它们应该是分开的？

我还需要移除那个 FAQ 链接，但我还没有完全弄清楚 CSS。

1 个赞
2

可能有更优雅或更准确的解决方案，而且我认为侧边栏将来会更具可定制性，但一个可能不可靠的 CSS 解决方案是：

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

image
image745×254 25.9 KB

它会定位到 FAQ 链接父元素的当前位置（倒数第二个元素）。如果 FAQ 链接和列表末尾之间有其他元素，CSS 选择器将无法正确定位元素。

但如果你确信列表的这部分不会改变，那么你可以使用它。

1 个赞
3

感谢 @Canapin - 我对 CSS 很熟悉，在我的论坛上用得很多，而且我对此很满意。我还没有完全弄清楚如何定位那些项目，并且我希望避免使用子元素代码，原因正如你所指出的。我也用了很多 CSS 来更改旧的遗留菜单内容，但用 CSS 访问起来更容易。实际上，我想操作“社区”下的整个部分并将项目重新排序，所以我怀疑我也必须使用一些 JavaScript。我真的很希望这部分能让管理员自定义。再次感谢你的提示！:slight_smile:

另外，“everything”到底是什么还不清楚。我有点想把它重命名得更具体一些。:thinking:

5

是的，链接容器没有唯一的类，因此在当前状态下很难定位它们。

您可能会对这个感兴趣：sidebarMod: Add/Remove Sidebar Links and Sections

您可以在“自定义”->“文本”中查找 js.sidebar.sections.community.links.everything.content :slight_smile:

1 个赞
6

好的，那个 CSS 代码奏效了。我担心它会影响该菜单部分员工的视图。谢谢！:innocent:

不幸的是，我无法让文本替换生效 :expressionless:

编辑：即使多次重新加载浏览器，我也必须切换主题才能使文本替换生效。Chrome 的缓存很麻烦。:woman_facepalming:

1 个赞
7

我还更改了相应的鼠标悬停文本：

IMG_3332
IMG_3332873×143 58.2 KB

1 个赞
8

所以这确实可以隐藏常见问题解答，但我后来发现它还会在每个菜单部分隐藏一个元素，这会产生不希望的效果 :sweat_smile: 当然了 :woman_facepalming: :upside_down_face:
我真的应该继续写常见问题解答或者把它委托给一个用户。

9

啊，对了。

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

应该会更好。

1 个赞
10

您也可以使用 data-link-name 属性来定位它们。
例如：

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
1 个赞
11

是的，我第一次尝试使用该方法时，数据链接语法是错误的。我忘记了“-name”部分，并认为它以某种方式无法完成。我真蠢，因为这与我在旧的旧版菜单中的做法相似。DOH :woman_facepalming: 谢谢。

顺便说一句，child 方法只能用于桌面视图。

1 个赞
12

问题是所有链接都位于列表元素内，而这些列表元素都具有完全相同的类。
如果隐藏链接，列表元素将保留并占用空间，尽管它是“空的”。
除非我遗漏了什么？

2 个赞
13

当社区部分在核心中完全运行时，那将是件好事。我轻松更改了“社区”标题，但我想更改元素的顺序。例如，在移动视图中，“我的帖子”链接位于“管理员”和“审核”之上，因此“审核”位于“更多”部分。我的员工不喜欢这样，我同意版主控件应优先于“我的帖子”。我应该创建一个用户体验功能请求主题，但我知道团队将来会努力使它对我们来说是可自定义的。

我想我可以隐藏“我的帖子”链接，然后将其移至全局链接部分。我不知道，我确定我试图在菜单中做太多事情。

2 个赞
14

是的，我明白了。对于这类问题，使用 :has 伪类会很方便，但它还有点有限。

.sidebar-section-link-wrapper {
  &.has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
2 个赞