lstuartfry
(Lukas Stuart-Fry)
1
大家好，我试图在移动设备上配置汉堡菜单面板，使其从屏幕右侧滑出，配置方式与个人资料面板完全相同。我看到汉堡菜单面板有一个专门设置的 left: 0 规则。我一直在调整 CSS，但无法复制个人资料面板的向左滑动行为。似乎没有太多专门针对汉堡菜单面板的 CSS，所以我不太确定自己遗漏了什么。
非常希望大家能提供一些提示或见解，告诉我可能遗漏了什么！谢谢大家。
Johani
(Joe)
2
嘿 Lukas，欢迎加入 Meta 
这里涉及的 CSS 并不多。动画由 CSS 处理，但偏移量的值是在 JavaScript 中设置的，以处理用户向右或向左滚动/平移以关闭菜单的情况。
大部分逻辑都在这个文件中——这只是一个方法；该文件中还涉及其他几个方法：
还有一些逻辑用于处理用户点击变暗背景以关闭菜单的情况。
针对用户菜单：
针对汉堡菜单：
要修改这些代码使汉堡菜单在右侧打开和关闭，涉及两个方面。
-
使用 ModifyClass 修改 site-header 组件，使其从右侧打开所有菜单。它目前会 检查菜单上的类，因此我们可以像这样覆盖它：
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// 我们不希望有任何左侧菜单，因此返回 false
return false;
}
});
-
关闭菜单时，我们也希望它向右侧关闭。对于滚动/平移事件，上述代码片段已经处理了这一点。现在我们需要修复用户点击变暗背景时的情况。Discourse 会根据 站点是否使用 RTL 语言 来决定这一点。要修改此行为，由于汉堡面板是一个 widget，我们需要使用不同的 plugin-api 方法。
我们将使用的方法是 reopenWidget，如下所示：
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// 应用核心代码
this._super(...arguments);
// 然后进行修改，使其向右侧关闭
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
接下来，你只需要添加几行 CSS 来覆盖该菜单的默认样式，如下所示：
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
现在让我们将所有内容整合在一起。这部分代码应放在你主题的 mobile > header 标签页中：
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// 我们不希望有任何左侧菜单，因此返回 false
return false;
}
});
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// 应用核心代码
this._super(...arguments);
// 然后进行修改，使其向右侧关闭
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
</script>
这部分代码应放在 mobile > CSS 标签页中：
.hamburger-panel,
.user-menu {
.menu-panel.slide-in {
left: unset;
right: 0;
}
}
保存主题并刷新页面后，汉堡菜单将在移动端从右侧打开和关闭——就像用户菜单一样。
lstuartfry
(Lukas Stuart-Fry)
4
太棒了！非常感谢您详细的回复，Joe！A+ 的客户服务，令我印象深刻且充满感激。
