基础Off-Canvas粘性菜单栏坚持到底部

时间:2016-08-30 11:48:35

标签: css responsive-design zurb-foundation zurb-foundation-6 off-canvas-menu

我正在尝试使用off-canvas创建一个foundation菜单,就像在official site中完成一样。

对于mobile菜单栏,我想将其粘贴到屏幕的底部

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

但是,只要点击移动菜单,菜单栏就会跳开,就好像是绝对而不是固定

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

1 个答案:

答案 0 :(得分:2)

有一些变化要做。

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

  2. 应推送<div class="off-canvas-content">以使用完整的垂直高度。您可以提及height:100vh;,但请注意browser compatibility.

  3. 只要切换菜单图标,<div class="off-canvas position-left">就会为其添加另一个类is-open。与第2点一样,也应该推动使用整个垂直高度。

  4. 以下是working example供您参考。

    注意:的 如果您认为转换有点奇怪,请安装motion-ui并应用一些转换。