javascript - 当我切换滑动侧菜单时，如何让我的整个 body 向右滑动

Question

当我切换我的滑动菜单时，我会让我的菜单在右边滑动。怎么做到的？到目前为止，我只能通过 position:fixed 来做到这一点，但这对我有害，因为它会影响导航——显然屏幕是固定的!那么如何在不修复我的 html 主体的情况下做到这一点。

这是我的情况演示:https://codesandbox.io/s/8zzr0jmm98

这是我的 Reactjs 片段:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = { menuDisplayed: false };
  toggleMenu = () => {
    console.log("toggleMenu reached");
    this.setState({
      menuDisplayed: !this.state.menuDisplayed
    });
    return;
  };

  render() {
    return (
      <div className="App">
        <div
          className={
            this.state.menuDisplayed ? "box_two_displayed" : "box_two_hidden"
          }
        >
          {" "}
          Box Two{" "}
        </div>
        <div
          className={
            this.state.menuDisplayed ? "box_one_displayed" : "box_one_hidden"
          }
        >
          {" "}
          Box One{" "}
        </div>
        <div onClick={this.toggleMenu} className="toggler">
          {" "}
          ToggleMenu{" "}
        </div>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是我的 CSS 片段:

.App {
  font-family: sans-serif;
  text-align: center;
}

.box_one_displayed {
  /* position: fixed;*/
  left: 200px;
  /* height: 100vh;*/
  background-color: grey;
  transition: all 0.5s linear;
}

.box_one_hidden {
  /* position: fixed;*/
  left: 0;
  /* height: 100vh;*/
  background-color: grey;
  transition: all 0.5s linear;
}

.box_two_displayed {
  position: fixed;
  z-index: 500;
  width: 200px;
  left: 0;
  background-color: cyan;
  transition: all 0.5s linear;
}

.box_two_hidden {
  position: fixed;
  z-index: 500;
  width: 200px;
  left: -200px;
  background-color: cyan;
  transition: all 0.5s linear;
}

.toggler {
  position: fixed;
  top: 50px;
  left: 350px;
  cursor: pointer;
  background-color: pink;
}

任何提示都会很棒，谢谢

Answer 1

你不需要位置属性来做到这一点，你应该只使用 flex https://codepen.io/kotanbich/pen/aRYYJW .

HTML:

<div class="page">
  <div class="navigation">
    <button id="toggle">
      ☰
    </button>
    <ul>
      <li>
        cattle
      </li>
      <li>
        poultry
      </li>
    </ul>
  </div>
  <div class="content">
    <div>
    </div>
  </div>
</div>

CSS:

.page{
    height: 100%;
    display: flex;
}
.navigation{
    width: 230px;
    flex-shrink: 0;
    background: green;
}
.navigation.hidden{
  width: 25px;
  overflow-x:hidden;
}

JS:

const toggleButton =  document.getElementById('toggle');
toggleButton.addEventListener('click',(event)=>{
  const navigation = document.querySelector('.navigation');
  navigation.classList.toggle('hidden');
})

主容器包含侧边栏和内容侧，主容器应设置为 flex。如果您希望导航具有您指定的宽度而不是其内容的宽度，则在主容器侧边栏内应将 flex-shrink 设置为 0。