重新排列现有汉堡菜单项

贡献 用户体验
1

是否可以移除或重新排列汉堡菜单中已有的项目？例如，将“关于”或“常见问题”移到顶部，移除“键盘快捷键”等。

1 个赞
2

菜单重组可能不行，但从界面的任何部分移除项目通常可以通过在“管理”>“自定义”中使用 CSS 规则来实现。

3 个赞
3

使用 CSS，您可以实现类似以下效果：

.hamburger-panel .panel-body-contents {
  display: flex; /* 设置弹性布局，以便重新排列元素 */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* 将页脚链接移至顶部 */
    .keyboard-shortcuts-link {
     display: none !important; /* 隐藏键盘快捷键链接 */
    }
  }
}

您可能需要调整其他一些样式（如边框、间距等），但相信这能帮您完成 90% 的工作。

8 个赞
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

你真是救星，Kris，太感谢了！！所以，类似地，如果我想要把“关于”或“常见问题”移到通用链接而不是页脚，我可以使用类似这样的代码：

.hamburger-panel .panel-body-contents {
  display: flex; /* 设置弹性布局以便重新排列元素 */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* 将页脚链接移到顶部 */
    .about-link {
    }
  }
}
5

不，CSS 最多只能移动整个区块——你无法将链接移动到不同的区块（我想你问的应该是这个）。

3 个赞
6

太巧了，我正好来 Meta 问这个问题，它竟然排在讨论列表的顶部。这概率可真低。

1 个赞
7

啊，明白了！感谢您的澄清。您说得对——我的最终目标是将 About 和 FAQ 从 footer 移动到 general 中，不过根据您的初始 CSS 示例，我似乎可以 删除 这两个部分，然后使用类似以下内容：

在 general 部分创建 About 和 FAQ 链接。虽然有点笨拙，但看起来是可行的。

3 个赞
8

这样应该可以。我用过这个自定义主题，效果很好。

4 个赞
9

@awesomerobot，感谢您的帮助。我想补充问一下，如果要隐藏顶部汉堡菜单中的部分项目，代码大概会是什么样？

我尝试根据您在这里提供的代码示例进行修改，但一直没有成功。

谢谢。

3 个赞
10

如果你右键点击其中一个链接并选择“检查”，你会看到与每个链接关联的类名……例如，“最新”链接会获得 latest-topics-link 类名。

58%20PM
58%20PM818×328 28.9 KB

要通过 CSS 隐藏它，你可以这样做：

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
6 个赞
11

啊，是的，我总是忘记检查功能。

完美，谢谢！

2 个赞
12

现在汉堡菜单已集成到侧边栏，有什么自定义技巧吗？

有没有办法将“更多”展开器中的项目移到顶层可见？

还有如何隐藏项目？我尝试过但没成功：

.d-sidebar .sidebar-sections .sidebar-section-link li a.sidebar-section-link-faq{
  display: none;
}

编辑： 好的，隐藏“关于”链接的办法是：

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

非常感谢！

1 个赞