基础画布粘贴菜单栏，坚持到底部 [英] Foundation Off-Canvas sticky menu bar to stick to bottom

问题描述

我尝试使用 foundation 6创建画布菜单=http://foundation.zurb.com/sites/docs/off-canvas.html =nofollow>官方网站。

I am trying to create an off-canvas menu with foundation 6 like it's done in the official site.

对于移动菜单栏，我想使其粘贴到屏幕的底部。

When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen.

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

但是一旦我点击手机菜单，菜单栏就会跳出来如果是绝对而不是固定。

But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed.

任何人都有这个问题，

Anyone had this problem and solved it yet?

推荐答案

有几个更改。

1. < div class =content> 请在里面提供< div class =off-canvas-content> 。 Off-canvas设计用于处理其 off-canvas-content 类中的内容。

1. The <div class="content"> should be mentioned inside the <div class="off-canvas-content">. Off-canvas is designed to work with contents written inside its off-canvas-content class.

应该推动< div class =off-canvas-content> 使用完整的垂直高度。您可以提及 height：100vh; ，但请注意浏览器兼容性。

The <div class="off-canvas-content"> should be pushed to use the complete vertical height. You can mention, height:100vh; although, beware of the browser compatibility.

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

The <div class="off-canvas position-left"> gets another class is-open added to it, whenever the menu icon is toggled. Like point 2, this should also be pushed to use the entire vertical height.

https://jsfiddle.net/HariHarker/nuom3h5y/8/ =nofollow>工作示例供您参考。

Here is a working example for your reference.

注意：
如果您认为转换有点奇怪，请安装 motion-ui 并套用一些转换。

这篇关于基础画布粘贴菜单栏，坚持到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！