JS Practice 05 Hamburger Menu

本記事で紹介すること

今回は，JS勉強第５弾ということで，Webページのトップ画面によくあるハンバーガーメニューを押下すると，ナビゲーションがニョキっと生えてくる画面の実装を行う．

準備

まずは，例のごとくサクッとFigmaでデザインを起こす．
イメージとしては，ミネラルウォータを研究している機関のトップページだ．

背景画像は，unSplashから拝借する．
また，ナビゲーションメニューをホバーすると，左から右に向かって，borderが伸びていく実装をCSSで行う．ここは，::afterを使って実装を試みる．
JSは，ハンバーガーメニューのところのみに用いる．
ハンバーガーメニューを押下するとニョキっとメニューが出てくるイメージだ．

ちなみに，htmlの構造は，少々見にくいが，おおよそ以下の通り．

実装

CodePenのリンクを添付する．

最後に

JSの練習というよりは，どちらかというと，CSSの練習になってしまった．
まだ5回目だが，だいぶ技は増えてきた気がする．
引き続き，勉強を継続していきたい．