关闭屏幕汉堡包导航

Question

我正在尝试创建右侧屏幕导航。类似于this。我正在关注这个tutorial，但我自己做了修改。

我在reactjs和CSS建设这个。

我目前无法让前端看起来/行为方式与this相同。我认为这可能是因为我不是css用.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为假（NAV DIV将仅具有nav类）

  let open = this.state.open ? "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.