プログラミング復習帳〜その3〜

この記事はweb制作を学んでいる際に、自分が調べて学べたことや、メンターさんに指導をもらったことを自分の復習としてまとめています。

Progateをやった後や、コーディングで悩んだ方の参考になれば嬉しいです。

また、他の方のブログ記事をたくさん記載させて頂いています。
いつも参考にさせていただいており、感謝いたします！！

学習中であり不完全なところも多くありますので、気になる所があれば先輩方にアドバイスをいただけると嬉しいです！

今回はアニメーションやホバーエフェクト、初めて使ったjQueryなどコピペでできるものを中心にまとめていきます！

〜復習帳その3〜

実は jQueryはほとんど勉強したことがなく…
Progateの無料でできるところをやっただけです。
それでも使えてしまうのが、ネット社会のいいところですね！
色々とサイトにまとめてくださっている皆様ありがとうございます！

ハンバーガーメニューの定番Drawer！

本当にコピペだけで簡単にハンバーガーメニューが作れてしまう魔法のサイトです↓

https://git.blivesta.com/drawer/

使い方や見た目のカスタマイズの仕方はこちらを参考にしました！

https://www.misallychan.com/entry/2017/07/27/070000

Drawer（drawer.js）の見た目をカスタマイズするCSSの書き方

drawer.jsでページ内リンク時をクリック時にメニューを閉じるようにする

またメンターさんからこのDrawerを教えていただいたのですが、課題の中のハンバーガーメニューは、メニューを開いた後に3本線の内、1本がMENUの文字に、残り2本が×になるデザインになっていました…

jQueryをほとんど理解していない私はここでつまづいてしまいましたが…
なんとか解決することができました。

元々、このDrawerは真ん中の線が元となり、擬似要素before、afterで上下に線を加えられています。

デベロッパーツールと何時間もにらめっこをした結果、
元々drawer-hamburger-iconについているbefore afterをdisplay:noneにして、
自分で新しく
drawer-hamburger-icon-before、
drawer-hamburger-icon-after
のクラスを作り×を作ることに成功しました！！

その際にJavaScriptもいじらないといけなかったため、こちらの記事を参考にしJavaScriptを書いていきました。