问题标签 [off-canvas-menu]

我有以下 Jquery，它将在画布上滑动一个框。它是为一个特定的高度编写的，即 200px 的盒子移动了 -200px。我想改变它，使盒子可以是任何高度。

我想更改它，以便 {'top':'-200px'} 实际上是当时#box 的高度。

目前在这个网站上，对于移动设备和小型桌面屏幕，画布菜单始终可见......谁能告诉我我做错了什么？

该站点是使用基于 Zurb Foundation 框架的 Joints WP 主题构建的。

在此先感谢，亚当

当用户单击菜单内的链接时，我需要如何以及在何处设置我的画布中的 data-close-on-click 参数以避免菜单关闭？

我无法使用Jasny Bootstrap将画布外与模态功能结合起来

这些是我采取的步骤：

1.我使用 jasny bootstrap 创建了一个画布外菜单，它按预期工作，仅Off Canvas

2.但是，当我添加模态功能时，它使画布外菜单在将屏幕拉伸到 992px 宽度后消失。此外，我无法通过单击元素外部来关闭模式。模态功能 + 非画布

我遇到的问题是data-toggle="modal"或data-toggle="offcanvas"我只能使用其中一个。有没有另一种方法来添加两个数据切换？或者更好：

我必须使用哪些选项才能同时使用具有模态功能的画布菜单？

先决条件：

• Bootstrap.min.css
• Bootstrap.min.js
• jasny-bootstrap.css
• jasny-bootstrap.js

HTML

CSS：

更新： 为了消除一些混乱，我添加了一个小提琴来演示它应该如何工作，但它只是缺少 scrollspy：https ://jsfiddle.net/kmdLg7t0/我如何将 scrollspy 添加到这个小提琴中以便菜单当我在特定部分时突出显示？

我创建了一个固定的左侧菜单，该菜单在 平板电脑和移动设备的浏览器宽度中变为<992px的非画布菜单。当我在浏览器宽度>992px上选择锚链接时，它会关闭菜单并导航到锚链接部分。

自定义 JQuery 代码： 这是我的自定义 jQuery 代码，当我单击锚链接时会关闭 Off-Canvas 菜单：

问题：

我决定添加一个引导程序 offscrollspy，它在浏览器宽度大于 992 像素后按预期工作，但是当我将浏览器宽度调整为小于 992 像素时，这会干扰自定义 Jquery 代码以关闭菜单并导航到锚链接。

这是小提琴：

Bootstrap ScrollSpy 导致 Off Canvas Menu 和 JQuery Code 出现问题

我的猜测：我猜这个问题的解决方案是使用 jquery 或 javascript在我的屏幕小于<992px时阻止或删除data-target=".navmenu"激活。或者我们可以找到一种仅在 >992px 之后才激活滚动间谍的方法。我目前正在尝试解决这个问题，但我需要一个真正的 jquery 专家来解决这个难题。

先决条件：

• Bootstrap.min.css
• Bootstrap.min.js
• jasny-bootstrap.css
• jasny-bootstrap.js

JS：

html:

CSS：

我正在尝试让 Foundation 6 的 Off-canvas 功能发挥作用。在这一点上，我现在正试图让 Zurb 自己的示例从他们的文档 ( http://foundation.zurb.com/sites/docs/off-canvas.html#complete-example ) 中工作。

当我打开画布的按钮被点击时，什么也没有发生。没有滑动，没有褪色，什么都没有。

我已经检查过它foundation.js是否包含在页面中。我可以看到事件处理程序绑定到按钮。

想法？提前致谢！

HTML 源代码：

我想将引导顶部固定导航的默认行为从顶部推入更改为从左侧滑入。我见过很多人使用画布外，但他们将它与侧边栏导航一起使用。我没有找到任何关于在折叠状态下将顶部固定导航从左侧滑入的工作示例。

如果您能对如何执行它有所了解，我将不胜感激。

这是关于 zurb-foundation 5.3 的。我不知道scss，所以我使用的是foundation 5.3的css版本。我正在关注基础文档中关于画布菜单的这个非常基本的示例。这个 offcanvas-menu 似乎有一个默认宽度。因为，我想要一个自定义宽度，所以我在 SO 上找到了一个解决方案，可以帮助我指定自定义宽度。在这种情况下，当画布内容出现时，一切都按预期工作on the left of the screen。

现在。我对代码进行了一些更改，因为我希望 offcanvas-content 出现on the right of the screen。这是不起作用的代码。我的意思是，它确实出现在屏幕右侧，但具有默认宽度，而不是我指定的宽度。

我想制作一个像这样的画布菜单，但我会将文本推出屏幕而不是裁剪。我想添加一个在我点击菜单后关闭菜单的功能。

我从 w3school 的画布菜单中获得了代码。

我正在使用苏格兰面板制作一个画布菜单。我想仅在移动设备上将面板的宽度从 70% 更改为 100%。这是我正在使用的代码：

我想我可以使用下面的代码，但我不知道如何

谁能帮我吗？

谢谢！