パターン1 本文に重ならない
##方針
ハンバーガーを押したら本文が左にずれて、メニューが現れるようにする。
メニューを配置して、本文を上から被せる。(z-index)
Step1 メニューを配置する
- 右上に配置するのでtopとrightを0にする
Step2 本文を配置する
- メニューの上に配置するのでz-indexの値をメニューより大きくする
- ハンバーガーを右上に設置する
- 左上に配置するのでtopとleftを0にする
Step3 javascript実装
javascriptで本文を左にずらすのではなく、cssで左にずらす。
javascriptの役割はイベントをきっかけにcssを適用すること。
- cssでopenというクラス名にして、
left: -○○px;と記述 - ハンバーガーにクリックイベントを記述し、上記のopenクラスを本文に着け外しする。
パターン2 本文に重なる
##方針
ハンバーガーを押したら本文にマスクがかかり、左からメニューが現れるようにする。
本文、マスク、メニューの3重構造にする。
メニューには閉じるボタンをつける
Step1 メニューを配置する
- 画面外に配置させたいので、rightでマイナス○○pxに設定する。
- 上記のままだとスクロールしたら見えてしまうため、overflow-xプロパティでhiddenを設定する。
Step2 メニューが閉じているときのスタイルを記述
- 本文の上にカバー、カバーの上にメニューが来るのでそのようにz-indexを設定
- カバーは最初はdisplayをnoneにしておく
- 画面いっぱいに広がるようにcssを書く
Step3 メニューが開いてるときのスタイルを記述
- カバーのdisplayをnoneではなくblockにする
- メニューのrightをマイナス○○pxではなく0pxにする
Step4 javascript実装
- ハンバーガーにクリックイベントを設置し、メニューが開いてるときのクラス名を付与
- 閉じるボタンにクリックイベントを設置し、メニューが開いてるときのクラス名を削除