使用开关为单手操作的人制作菜单响应式（更改位置）？

Question

我想在 HTML 中构建一个侧边菜单，如果可能的话只使用 CSS。问题 22 是我需要使用 switch/button 将菜单从屏幕的左侧移动到右侧。原因是我有一个只有一只手的朋友，这对他来说是一个辅助功能。我所知道的足以进行一些网络编码，但我不知道找到我要找的东西的术语。

我理解的唯一三种方法如下。

iframe：我不想使用，因为我无法设置它的样式。

Div：我不知道如何在不破坏网页布局的情况下隐藏或取消隐藏 div。

一起编写一个单独的 HTML：似乎应该有更好的方法。

如果您能向我提供任何有助于此项目的资源或建议，那将是非常棒的！！！感谢您的宝贵时间和帮助！！！

Answer 1

如果我理解正确的话，您想在用户单击按钮时切换菜单的位置。

为此，我们首先必须在 HTML 中创建一个简单的菜单和一个按钮，如下所示：

<ul class="left">
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
</ul>

<br class="clearFloat" />

<button onClick={togglePosition()}>Change position</button>

为此HTML我们必须写相应的CSS。

.left {
  float: left;
}

.right {
  float: right;
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0
}

button {
  display: block;
}

CSS属性float可以左右定位HTML个元素。这就是为什么我为他们创建了两个 CSS 类。将其中一个类应用于菜单将导致其改变位置（.left 表示左侧位置，.right 表示右侧位置）。

请注意 HTML 中的菜单的类名是 .left。这是您希望菜单所在的初始位置。

现在我们需要通过单击 HTML 中的按钮使菜单切换类 .left 和 .right。我们可以通过在 javascript 中编写一个函数并使用按钮中的 onClick 键调用它来实现。在这种情况下，将调用 togglePosition() 函数来切换菜单的类名。这个函数看起来像这样：

togglePosition = () => {
    const menu = document.querySelector('ul')
  if(menu.className == 'left') {
    menu.className = 'right';
  } else {
    menu.className = 'left';
  }
}

这一切都是非常基础的，还有更好/更优化的方法可以做到这一点，但我希望你能理解这个概念并从中学习。 Link 到互动游乐场：https://jsfiddle.net/udwfnzme/4/

Answer 2

我会这样做：

如果我的菜单位于 <div> 中，我们将其命名为 #my-menu-container。我会用这样的样式设置菜单样式：

#my-menu-container {
  position: absolute;
  top: 0;
  left: 0;
}

当我按下开关时，我会使用 JS 向该容器添加一个 class。

let btn  = document.getElementById('my-switch');
btn.onclick = () => {
  let menu = document.getElementById('my-menu-container');
  menu.classList.add('menu-right')
}

那class会是这样的。

#my-menu-container.menu-right {
  right: 0;
}

Answer 3

可以使用 CSS 个变量来完成：https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration/

使用开关为单手操作的人制作菜单响应式（更改位置）？

Making a menu responsive (change locations) for a one handed person using a switch?

html

css

menu

accessibility

placement