30代半ば女子が無謀にもプログラマーになるまでの道のり

ドロワーメニュー

前回作ったハンバーガーボタンにメニューを追加するとスマホ版に使える。

★右上にボタンがあって、右から出てくるメニューを作ってみます。

See the Pen ドロワーメニュー by riko (@ri-ko) on CodePen.

初めは、navクラスのpositionをabsoluteにしていたので、いつまでたってもメニューが隠れませんでしたorz。

fixedに変えたら上手くいきました。このメニューは4日かけて作りましたが自分の中で60点くらいなので、

もう一度完成系を作ります。

★追加したいことは、

①メニュー表示の時の背景を暗めにして、メニューを目立たせたい。

②メニューをスクロールしても、背景は止まったままにしたい。

③メニューの出現方法をもっとふわっとさせたい。

④メニューを閉じるときは「×」以外の画面をクリックしても閉じるようにしたい。

出直してきます。