css - Foundation Off-Canvas 粘性菜单栏粘在底部

Question

我正在尝试创建一个off-canvas带有 6 的菜单，foundation就像在官方网站上所做的那样。

说到mobile菜单栏，我想让它粘在屏幕底部。

.title-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
}

但是只要我点击移动菜单，菜单栏就会跳开，就好像它是绝对的而不是固定的。

有人遇到过这个问题并解决了吗？

Answer 1

需要进行一些更改。

1. <div class="content">应该在里面提到<div class="off-canvas-content">。Off-canvas 旨在处理在其off-canvas-content类中编写的内容。

2. <div class="off-canvas-content">应该推动以使用完整的垂直高度。不过，您可以提一下，height:100vh;注意浏览器的兼容性。

3. 每当切换菜单图标时，都会添加另一个<div class="off-canvas position-left">类。is-open像第 2 点一样，这也应该被推动以使用整个垂直高度。

这是一个工作示例供您参考。

注意： 如果您觉得过渡有点奇怪，请安装motion-ui并应用一些过渡。