问题标签 [off-canvas-menu]

我是这个网站的新手，我对编码也很陌生。我正在尝试制作非画布菜单，但遇到了三个小问题。首先，如何在菜单展开后更改其宽度？其次，如何使三行菜单按钮位于屏幕右侧而不是左侧？第三，如何在鼠标悬停时打开的可扩展画布菜单中添加子菜单？

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

我正在尝试在我的 Wordpress 网站中实现一个画布外菜单。对菜单进行编码的说明取自此站点：

http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html

问题是当您打开菜单并且鼠标在菜单上时，我无法滚动菜单下方的站点内容。这在移动版本中特别重要，因为菜单占用了屏幕上的大部分空间，因此能够滚动站点内容非常重要。

所以基本上我希望菜单不可滚动，但无论菜单是否可见，网站内容都应该始终是可滚动的。

我正在构建一个画布外推送菜单，一切正常，有几个方面我似乎无法弄清楚。

1. 如何禁用内容包装器的滚动。

2. 如何仅滚动关闭画布菜单。现在它滚动网站本身的高度。

这是一个代码笔，可以向您展示我遇到的问题。

代码笔演示

HTML

CSS

JS

谢谢！

我有下面的代码，当您单击链接时，我正在尝试显示/隐藏 div。基本上点击链接会将“活动”类添加到 div，这反过来将删除“隐藏”类并改为显示：块。我遇到的问题是我希望这个 div 在画布菜单中显示/隐藏。我似乎无法让它工作。

款式：

链接：

分区：

脚本

这是实际页面的链接：

http://lavacable.com/satc/eb/rightonly.html

我该怎么做呢？

这是我目前的 wip：

https://jsfiddle.net/Lg0wyt9u/967/

删除按钮暂时隐藏。

应该发生的是，它被显示出来，并且其他内容被“从画布”推到与该元素相同的宽度。但是，我不确定如何进行。我使用 display:flex 并尝试了一些定位，但没有成功。

菜单图标不会切换关闭画布菜单。单击时，它会像往常一样更改内容部分的不透明度，但不会滑动以显示菜单。

我的导航适用于我的 pc 和 mac 上的所有浏览器、iPhone 和我的 android Samsung S4 上的 Chrome，但不是它的股票“互联网”浏览器（三星浏览器 2.1）这很奇怪，因为我刚刚创建了另一个具有类似 Foundation 5 的站点工作正常的画布外菜单。有没有其他人经历过这个？

这是一个wordpress网站。我的 header.php：

我正在开发一个使用非画布侧边栏菜单的引导站点。将商品添加到购物车后，此菜单会显示一个小购物篮，其中购物车内容的宽度小于 980 像素。菜单底部是一个结帐按钮。该按钮触发登录/注册表单的模式。触发此模式时，侧边栏菜单保持打开状态。

问题：实际的模态正文内容显示在侧边栏内容的“下方”，而不是与站点和引导站点示例上的所有其他内容一样好。z-index 问题似乎是这样。:/ 似乎无论我如何玩它，都没有任何效果。

实际的模态代码已从侧边栏移至页面顶部。我的想法是，这应该可以缓解大多数显示问题。当模式打开但失败时，我尝试使用规则覆盖关闭画布菜单的 zindex。

任何想法将不胜感激！

谢谢！朱丽叶

引导模态...

关闭画布侧边栏...

我在我的 Rails 应用程序中添加了一个画布外设计登录侧边栏。

通过从各种教程中获取点点滴滴并将其与我自己的代码混合，我已经设法使其几乎正常工作。

在我views/layouts/application.html.erb的渲染中，包含设计登录表单<%= render 'login' %>的部分被隐藏left: -300px;，直到用户单击菜单中的登录按钮，<a href="#" class="toggle-nav">Log in</a>然后它从左侧轻轻滑动到视口。这一切都非常顺利，但调整“登录侧边栏”的高度是一个问题。

_login.html.erb 的代码是

登录表单运行良好，但样式似乎是个问题，至少我还没有设法正确设置它的样式，所以loggin部分跨越了视口的整个高度，我几乎花了一整天的时间来做这件事。（我用谷歌搜索，查看了各种教程，进行了自己的更改，搜索了堆栈溢出等。）

这是部分的“css”。

这.red class是我在多次尝试使登录表单背景跨越视口的整个高度时所做的一个类。我很确定这不是正确的方法。

此代码application.js控制切换

** 编辑**

这是heroku的链接https://hlinreykdal.herokuapp.com/

如果有人可以检查一下并引导我走上正确的道路，将不胜感激。

我正在尝试使bootstrap offcanvas 示例对双方都有效。到目前为止，我设法让它在两侧滑动，但由于某种原因我对 css 不太擅长，因此菜单不在应有的位置。bootply 中有非常相似的模板，所以这里是我在这里的非常相似的示例

您好，我似乎多年来一直在努力让右侧边栏既被卡在较大的显示器上，又在较小的显示器上脱离画布。我几乎在我的测试站点上，但我担心我无法链接到它，因为 SE 不喜欢指向网站的链接，但我有太多的代码，我很难用它来制作一个 jsfiddle。我努力了。

假设我可以接受人们可以提供的任何指示。那也将不胜感激。这是指向我的网站的链接（非 seo，因为我不使用该网站）也许可以帮助我解决我出错的地方。谢谢。 http://kompressaur.com/index.html

一切正常，直到我到达移动断点。然后出现的切换导航按钮不想做任何事情。由于我的灵魂已被摧毁，所有的帮助都值得赞赏。我花了将近 7 年的时间才走到这一步，看起来……它仍然很差。

谢谢

:(