結論からいうと、最適と思える実装はまでたどり着けずでした。
どんなことをしたのか
はじめに、ドロワーのようなナビゲーションをプラグインを使わずにjQueryで一から実装ををすることで、どういう仕組みで動いているのかを見てみました。ボタンをクリックすることで、開閉されるメニューの仕組みがよくわかりました。
See the Pen Start Vue.js by kurokoroll (@kurokoro) on CodePen.
ということで、すっかりjQueryの勉強会に(笑)
次に、プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト・UIのマルチデバイス対応手法の「Chapter3 ナビゲーションの実装」を読み解いてみました。流し読みしてたくらいだったので(ごめんなさい)、詳しく見ると普段使っていないメソッドもあったりと発見もありました。人のコードを詳しくみて見るのも勉強になります。
ドロワーの実装などはプラグインに頼ることが多いのですが、カスタマイズするときに困ることがちょこちょこあったので、今後少し楽になるかな。
課題がのこる
ドロワーでメニューを表示したときのスクロールの問題
レスポンシブ時に起こる問題(特にPCと表示が違うときに起こる)のあれこれ
そもそも試そうとしていたレスポンシブの問題はタイムアップとなってしまいましたので、また試してみます。
まとめ & 次回予告
触っているうちにあれやこれや試したくなって、脱線することも…。こんなゆるっとした会ですが、細々続けていけたらと思います。
次回は、2017年10月21日(土)予定。内容は、SVGをしてみたいなと思います。もくもく会のような形式でしようかなと思ってますが、またFacebookのイベントで案内しますので、興味があればご参加ください。