问题标签 [off-canvas-menu]

我一直在寻找如何在单击某些菜单项后自动关闭画布菜单，但似乎没有任何效果。

因此，我遵循了有关如何在 Foundation 6 文档上制作画布菜单的指南，并且它可以正常工作。这部分没问题。现在，当我单击某个链接菜单时，它会停留在那里，我希望它关闭。有谁知道如何解决这个问题。

我找到了应该可以解决问题的片段，但是在我应用这个 JS 后我的菜单停止显示。其他人报告同样的问题。

Here are the docs，但由于我对 JavaScript 了解不多，所以我请求有人编写正确的代码。

我正在尝试更改小屏幕的画布导航菜单的大小，因为它对我来说太窄了。我尝试将其更改为 col-xs-12，但切换时它仍然无法正常工作...... https://getbootstrap.com/examples/offcanvas/

有谁知道如何改变它？

我一直在互联网上寻找解决方案，但还没有找到。

我有一个带有粘性标题/导航的网站，它有一个汉堡包按钮来打开一个画布菜单。off-canvas-wrapper 包装了所有内容，包括标题。标题导航有效，但是当您打开关闭画布菜单时，标题会消失。最重要的是，如果您向下滚动页面，您不会在画布菜单中看到菜单项 - 您必须向上滚动。

网上有人建议把header/nav从off-canvas-wrapper-inner中取出来，这样可以防止bar消失，但是无法点击菜单栏关闭off-canvas菜单。

有没有其他人找到解决这个问题的方法？

这是我的代码笔http://codepen.io/anon/pen/GZWPrj

我知道它已经被回答了几次，但是我很难将它翻译成我的代码。

所以我有第二个画布外菜单，它按预期工作。

我要添加的一件事是能够通过单击画布外菜单之外的任意位置来关闭此菜单 - 因此单击画布内部。

我找到了一个很好的工作示例，例如

此处在单击窗口时关闭画布菜单，但我太笨了，无法弄清楚如何将其实现到我的代码版本中。

我正在使用Foundation building block section 中的示例制作“带有画布外导航的顶部栏” 。

这是我的代码，

（ps stackoverflow 中的代码编辑器甚至不适用于切换部分，但您可以在 jsfiddle 上看到它：https ://jsfiddle.net/03bx493q/ ）

你可以看到一些奇怪的东西，

• 当我单击按钮（第一次）时，它同时显示桌面版本菜单和画布菜单。然后我再次单击按钮关闭菜单。

• 当我单击按钮（第二次）时，它只显示画布外菜单。

我尝试了不同的方法来解决，例如将“hide-for-small”类添加到widemenu（它并没有像预期的那样有帮助）......

先谢谢了！

我正在使用我一直试图正确工作的画布菜单。为了让我的固定菜单和画布外播放得很好，我不得不将我的标题从画布外的内部包装中取出，但现在当菜单打开时我的标题不会移动。

当关闭画布打开时，它将 .is-open-right 应用于内部包装器，然后将 CSS 应用于它。

仅当将 .is-right-open 类添加到我的包装器时，我才尝试将这行 CSS 添加到我的标题中。

我试图以这种方式定位：

}

当菜单关闭时，我的 HTML 看起来像这样：

打开时的 HTML

只有当下一个兄弟元素具有类 .is-open-right 时，我才能定位我的标题元素吗？从我读过的......看起来我可能不得不去一个 JS 解决方案。

嗨，我最近使用 bootstrap 4 offcanvas 模板来构建我的网站

http://v4-alpha.getbootstrap.com/examples/offcanvas/#

现在我想让我的侧边栏跟随用户滚动但引导程序删除了词缀类并建议使用 css 位置粘性。我试图这样做并以侧边栏为目标，但它搞砸了布局。定位 .nav 也不起作用

html

CSS

这可能与我的侧边栏关闭画布和侧边栏位置有关。但是如果没有 mysidebar 绝对位置，我的部分内容就会被下推。我尝试删除它并使用 col-xx 类但不行:(

嗨，我正在尝试让 zurb Foundation 6 拥有带有粘性菜单的画布外菜单。重新制作了画布外布局，以在桌面视图中具有相同高度的侧边栏和内容块。

问题：

• 粘性菜单在右侧画布侧边栏中不起作用

我在这里创建了一个JSFiddle来演示这个问题。

我正在尝试制作画布外菜单，但遇到了问题。只有两个第一个菜单链接显示为灰黑色背景，但我希望所有菜单链接都有它。其余 5 个菜单链接确实在菜单内（当您将鼠标悬停在链接上时可以看到），但它们具有透明背景。

我将 html 和 css 代码放入 Jsfiddle：https ://jsfiddle.net/ghbx6fmn

PS 这些代码似乎在 Jsfiddle 上运行良好，但在我的网站上却没有......