问题标签 [off-canvas-menu]

在我的网站上，我有一个很长的案例研究页面，有 10 个部分，因此我想创建一个水平菜单，其中包含指向页面上每个部分的链接。用户将能够在小屏幕设备上水平滑动它，以便用户可以访问通常不在视口画布上的链接。

我了解如何实现所有这些，但我需要的是这个；当用户向下滚动并到达菜单链接稍微向右偏离画布的第五部分时，菜单将向左滑动到足以使链接图标出现在最左侧的视口中。反过来，这也会将来自该链接的其他链接也带到画布上。

但问题是，如果我向滚动菜单容器添加一个类，该类分配一个 transform: translate(X) 值并因此在用户到达特定部分时将其动画到左侧，整个菜单会在该点固定，它是用户不可能从那时起手动来回滑动菜单以访问他们想要的任何菜单链接。

我也希望同样的事情反过来发生，这样在上面触发并且菜单向左移动之后，当用户决定向上滚动页面并越过触发初始菜单滑动操作的部分时，它向右滑回其原始位置。

每当用户在任一方向（向上或向下）滚动经过该特定点时，触发菜单滑动的这种行为都应该发生，但用户仍然应该能够以任一方式手动将菜单滑动到任何点。

我知道所有这一切都必须使用 Javascript 才能实现，但我尝试了很多不同的想法，包括 element.scrollintoView，它不起作用，因为将其分配给菜单中的一个 ID 不会使整个菜单滑过。我还尝试通过添加动画类来移动菜单，但这也不起作用。

更新：

我在代码笔上创建了一个基本示例：

https://codepen.io/creativezest/pen/MWyqPYL

您会看到我添加了一些 javascript 来尝试在页面向下滚动到 #about 部分时使菜单向左滚动，以便底部菜单中的“关于”链接滑动到视口的最左侧。但这似乎不起作用。

正如我在上一篇文章中所解释的那样，这就是我想要实现的目标以及使菜单向后滚动，以便当用户向上滚动过去时，“主页”链接位于视口最左侧的原始位置#about 部分。

我还需要用户在上述行为发生后仍然能够手动左右滑动菜单。

我非常感谢任何人对此提供的任何帮助。

非常感谢。

马克

我有一个画布外菜单 ( )，当单击或按下#mobile-menu按钮/触发器 ( ) 等时会打开它。.mobile-menu-toggle

菜单在键盘按下时打开正常，但它不在菜单内聚焦，而是焦点在文档流中的下一个元素上 - 菜单实际上位于文档中的“触发器”之前。

所以我正在寻找一种方法来在它打开时在画布菜单中设置焦点。

我已经尝试了很多变体，但没有任何反应，焦点仍然是下一个元素，而不是我指定的元素：

这是 html 的简化版本：

我还发现，如果我尝试在移动菜单中的任何位置添加 tabindex，触发器将不再在按键上打开它。

我怎样才能使它在触发器打开菜单时，焦点在 #mobile-menu 元素内？

在桌面视图的 tabindex 中识别出画布外导航菜单。因此，如果用户在桌面上查看，他们应该选择“跳到主目录”以实现可访问性；但随后他们会在到达页面徽标之前通过 8 个不可见的链接进行选项卡。

本网站使用的是 Zurb Foundation 非画布。

我尝试按照此线程中的建议将 tabindex="-1" 添加到画布外链接。虽然这解决了桌面问题，但它变成了画布外的问题，因为链接不会在那里进行选项卡。

关于如何仅对视图中的导航菜单进行制表索引的任何想法？

我正在使用bootstrap 5 off-canvas进行折叠，同时我有一个公告栏，它只是我导航栏顶部的一个可忽略的警报。

问题是当我在可关闭警报上单击关闭按钮时，我的画布外上衣尺寸效果不佳。

我该如何解决这个问题？我在codepen.Io上做了一个活生生的例子

注意：尝试调整窗口大小并关闭警报以查看我在画布外遇到的问题。

HTML / CSS / JS：

我正在 Bootstrap 5 中创建一个登录页面，其中默认菜单应替换为带有关闭图标的画布外菜单。

我搜索了一些教程，但无法实现关闭按钮。我需要从右侧打开菜单图标作为带有工作下拉菜单的画布菜单，任何帮助将不胜感激。谢谢。

我正在使用 offcanvas 组件（https://getbootstrap.com/docs/5.0/components/offcanvas/）。但是我想知道当我在 offcanvas 窗口之外单击时是否可以阻止它关闭。当我按下 ESC 时，我设法阻止它关闭，但是当我在画布外单击鼠标时，没有办法（就文档而言）阻止它关闭。有人有想法吗？

编辑：我设法通过监听 hide.bs.offcanvas 事件然后使用 e.preventDefault(); 但是现在我无法使用其默认关闭按钮关闭画布，因为它总是会取消隐藏事件。有任何想法吗？

你可能会认为它是重复的，但我向你保证，我已经研究了几个关于 stakeoverflow 的问题，但找不到类似的问题。

我已经实现了 Bootstrap 5 offcanvas，它有一个奇怪的问题。

当您触发带有文本的按钮（锚/按钮）时，它可以完美运行。但是，当您将图像或图标 svg 放入其中时。它停止工作。

这是我的代码：

我的应用程序的顶部菜单

这是侧边栏代码：

根据引导文档（offcanvas）非常简单直接的实现

复制步骤：

1. 继续使用您的移动设备
2. 转到测试网址
3. 点击菜单（右上角）
4. 点击左上角的标志

看到不同。

我正在尝试将 bootstrap 5 的新 offcanvas 组件集成到我的 vue 应用程序中。我有这段代码，在构建应用程序后，我想测试它，但我看不到 offcanvas 菜单。我没有加载 js 插件来维护我的应用程序灯，我正在使用将绑定所需类的变量添加显示类。我该如何解决？

我尝试在导航栏上使用Bootstrap5 Toggle bottom offcanvas。首先我写到"Home"， aria-controls="offcanvasBottom">Home</button>然后我将一些文本内容放入破折号区域：

它工作得很好。然后我复制粘贴所有 offcanvas 代码并更改"Home"为"Contacts"并将新文本内容放入破折号区域。当我检查这两个 offcanvas 的代码时"Home" and "Contacts"，我发现两个 offcanvas 中的文本内容相同。然后我创建（复制粘贴）更多 Toggle bottom offcanvas - "services", "FAQ"，具有不同的文本内容。我的网页中的结果是一样的。它们都具有相同的文本内容，例如第一个 Toggle bottom offcanvas "Home"。我想要——当我点击时"Home", "Contacts", "Services",..etc。里面有不同的文本内容 - 不一样。Toggle bottom offcanvas 中有几个class's and id's，但主要是class="btn btn-primary"和id="btnnav"。

我想使用 offcanvas 创建一个带有导航栏的网站。它很好用，但我想在鼠标离开功能上实现一个关闭导航栏。

你有什么建议吗？

谢谢你们