關閉屏幕漢堡包導航

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.