Question

我想尽可能只使用CSS在HTML中构建侧边菜单。问题22是我需要使用开关/按钮将菜单从屏幕的左侧移动到右侧。原因是我有一个只有一只手的朋友，这对他来说将是可访问性功能。我知道足以进行一些Web编码，但是我不知道用来查找所需内容的术语。

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

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';
  }
}

这都是非常基础的，并且有更好/更优化的方法可以做到这一点，但是我希望您能理解这个概念并从中学到东西。链接到交互式游乐场：https://jsfiddle.net/udwfnzme/4/

Answer 2

我会做这样的事情：

如果我的菜单位于<div>内，我们就称它为#my-menu-container。我会用以下样式来设置菜单样式：

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

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

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

那堂课是这样的。

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

Answer 3

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

使用开关使单手菜单响应菜单（更改位置）吗？

3 个答案: