遷移が「アウト」私はフル幅のページを持っている

Question

を動作しません、私はこのようなボタン、メニューオープンコンテンツALIGN、クリックしたとき：

私はメニューをクリックし、移行は機能しますが、私は閉じることはありません。どうして？

// Style When the Menu is Opened 
 
#page-content.page-active{ 
 
    width: calc(100% - 300px); 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
#page-content { 
 
    width: 100%; 
 
    padding: 10px 30px; 
 
    transition: width 0.7s; 
 
}

Answer 1

メニュー遷移の作業を見ることができ、私はあなたのためにCodePen例を作成しました。これは、絶対配置と幅の変更の組み合わせを使用します。

メニューは、コンテンツが100％で、その幅を有する

position: absolute; 
left: -30%; 

を使用して、その幅だけ左にオフセットされています。メニューが切り替わると、コンテンツはleft: 0;にアニメーションされ、コンテンツの幅は70％に縮小されます。コンテンツにはwidth: 100%を使用して、メニューを重複させることもできます。

https://codepen.io/NikxDa/pen/JMdXWE