问题标签 [off-canvas-menu]

我对 Zurb Foundation 的 Sticky Top Bar、Off Canvas 和我在悬停时使用minicart div 的组合有疑问。

当我将鼠标悬停在图标上时，似乎我的 minicart div 会显示，但它被基础的扩展行覆盖，并且仅在页面向上移动 1px 时才会显示在扩展行上方。

网址是http://dev.turnerandlast.com/

我在我的网站上使用Pushy 非画布菜单，效果很好，但它给我的固定div header带来了麻烦。当我向下滚动页面时，标题完全贴在顶部，但是一旦我打开画布菜单，我的标题就消失了？当我关闭画布菜单时，它突然又回来了。看起来很奇怪。

你可以在这里查看我的问题的（代码笔）现场演示。 或者直接运行下面的代码片段。

我希望它在打开画布菜单时保持可见。帮助将不胜感激。
提前致谢。

我正在尝试通过单击该面板中的链接来关闭画布外导航面板。您可以使用汉堡按钮打开/关闭面板，并在单击页面上的任意位置时将其关闭。

见：http ://whyyouthinking.com/xindex.html#what

我到了它可以工作的地步，但汉堡必须点击两次才能再次工作。

我已经解决了这个问题：

现在我有问题 e.preventDefault(); 当您单击面板中的链接时，也会停止我的“滚动到”功能。有没有办法只针对.menu-link？

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

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

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

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

由于加载 ajax 脚本，我想使用 javascript 来关闭画布区域。

文档说，但是关于什么和是$('#element').foundation('close', cb);什么的解释方式并不多：/#elementcb

#element和是什么cb？您将如何以编程方式关闭他们的示例？

我正在为我正在从事的项目寻求帮助，但我似乎无法弄清楚。我已经搜索并尝试了各种脚本以及没有冲突的脚本。我希望有人可以帮助我。

我有一个从导航锚定到页面内容的页面。当您将鼠标悬停在页面中间的图像上时，您可以单击到非画布页面。我已经完成了这项工作，但是当您单击页面底部的主导航时，我希望平滑滚动。似乎画布外的锚点和平滑滚动脚本不能一起工作。我对 jquery 和 javascript 很陌生，所以我似乎无法让它工作。

我找到了平滑滚动的这段代码（现在我把它注释掉了），但是当我把这段代码放在页面上时，它会破坏导航锚：

是否有其他代码可以在我的页面上运行？你可以在这里查看我的页面：

http://ebresearch1.wpengine.com/index.html

此外，我无法让导航图标处于活动状态。

我正在使用这段代码：

但它只切换活动和非活动状态。我希望它们仅在您单击另一个导航项之前保持活动状态。

平板电脑问题：

另一方面，我在导航中的手机/平板电脑汉堡链接在点击后不会关闭导航。它只是保持打开状态。单击链接后，我似乎无法触发关闭画布。

我知道这是很多信息，但我被困住了。如果我需要提供更多信息，请告诉我，我会发布。

谢谢！

我正在使用 CSS 而不是 SCSS 使用 Foundation 6 构建网站。我在小屏幕上使用响应式画布外向下钻取菜单，默认情况下，画布外菜单宽度为 250 像素。

问题：我希望这是浏览器窗口的全宽。

设置宽度

我使用 JavaScript 动态设置.off-canvas.position-right width窗口的宽度和窗口right的负宽度。我还设置.off-canvas .drilldown max-width了窗口的宽度。

这很好用，我是这样做的：

我对这部分很满意，但它只解决了一半的问题。

移动画布外

除了处理菜单的宽度，.is-open-right使用transform: translateX().

我尝试在我的函数中包含这些行以将transform: translateX()值设置为窗口的负宽度：

但这没有用。我认为这与窗口加载时.off-canvas-wrapper-inner没有类的事实有关。.is-open-right该类是在单击汉堡切换按钮后动态添加的，该按钮具有.menu-icon. 所以我尝试添加一个click事件监听器，但它仍然不起作用。

这是我的全部JS代码：

我哪里错了？

我不是在寻找任何人为我编写解决方案，但任何关于我如何设置.is-open-right translateX值的反馈和指导都会非常有帮助。

这是整个项目代码：https
://github.com/paulshryock/paulshryock/releases/tag/v0.0.1 这是一个现场演示：https ://paulshryock.github.io/paulshryock/

鉴于此 HTML：

还有这些 CSS 属性（它们真的在媒体查询中）

我不能用

代替

从视觉上看，它们具有相同的效果。

在这里，一个工作的 JSFiddle

我正在尝试将 offcanvas 添加到我的引导导航中，响应式效果很好，但是当我尝试桌面分辨率时下拉菜单不起作用。

问题似乎是“bootstrap.offcanvas.js”。

当我删除“bootstrap.offcanvas.js”时，它可以工作。

有什么想法可以解决这个问题吗？

我试图在这里找到解决方案，但找不到。我正在处理这个响应式设计页面。在移动设备上，当您点击菜单时，主要内容 div 会被推到一边（通过 Javascript）以显示下方的左侧固定菜单。一切都很好，除了当您在计算机浏览器（模拟移动设备）上看到网页时，打开菜单然后展开浏览器窗口直到它到达“桌面”断点，主要内容 div 仍然被推到一边。有没有办法在最大化到桌面断点时重置内容（主）div的位置？我尝试了很多替代方法都无济于事。这是该页面的 jsfiddle 链接：https ://jsfiddle.net/luchosoto/wad3pmn0/1/

主要内容 div 的 CSS：

将主 div 推到一边以显示菜单的 Javascript：

提前致谢。