javascript - 屏幕外汉堡包导航

Question

我正在尝试创建一个右侧的屏幕外导航。类似于 this 的东西.我正在关注这个 tutorial但我自己进行修改。

我正在 reactjs 中构建它和 CSS .

我目前无法让前端的外观/行为方式与 this 相同.我想可能是我没有用 .nav-trigger:checked + .site 选择正确的标签。 .

我想要 <ul>取消选中标签时隐藏。选中时，<label>将向左移动 215px 和带有 .site 的元素将向右移动 200px，显示底层 <ul> .

这是我的 jsfiddle :

Answer 1

你可以这样做。

• 在开始时隐藏您的导航并仅显示汉堡包图标。您可以使用 transform: translateX() 来完成。您可以使用 display: none，但是 display: none 您不能设置动画。

• 然后单击汉堡包图标将状态更改为 true(根据状态值，我们将渲染一个类来显示导航)。

• 然后呈现一个 var(例如 open)，如果 this.state.open 为 false，它将为空(nav div 将只有 >导航类)

  让 open = this.state.open ? “打开”:“”；

• 如果 this.state.open 为真，则 var open 将为 open(nav div 将有两个类 nav 和 open)。

你可以这样做:

class Test extends React.Component {
    constructor(props){
        super(props);
          this.state = {
            open: false
          }
    }
    
    toggleNav(){
        this.setState({open: !this.state.open});
    }
    
    render(){
        let open = this.state.open ? "open" : "";
        return (
        <div>
            <div className={`nav ${open}`}>
               <div className="icon">
                   <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" onClick={this.toggleNav.bind(this)}/>   
               </div>
          </div>
        </div>
      )
    }
}

React.render(<Test />, document.getElementById('container'));

并按如下方式添加css:

.nav{
  width: 200px;
  height: 800px;
  background-color: yellow;
  position: relative;
  transform: translateX(-208px);
  transition: all 1s ease-out;
}

.icon img{
  width: 50px;
  position: absolute;
  right: -50px;
}

.open{
  transform: translateX(0);
}

Here is a fiddle to play with.