コピペでOK！Vue.jsで『ハンバーガーメニュー』を実装する方法

2019年3月8日

スマホ向けWebサービスのコーディングをする機会があったのですが、その際にVue.jsを使って動きの部分を実装しました。

今後も同様にVueで実装する機会もあるかと思うので、一部分ですがハンバーガーメニューのサンプルコードを備忘録として残しておきます。（これだけだったらVue使う意味ないですが、、）

Vue初心者の僕でもかなり簡単に実装できたので、同じような方の参考になれば幸いです！

動作サンプル

See the Pen
【Vue.js】ハンバーガーメニュー作成 by hiroy (@hiroya)
on CodePen.

スポンサードサーチ

簡単な説明

やっている事はシンプルで、Vue.jsの機能『クラスのデータバインディング』を使用し、メニュー・背景のクリックに紐づいてクラスを付与・削除しているだけ！

あとはcssの調整となります。

jQueryのイベントハンドラ（click）でクラスの付与・削除をしたことがある方はすぐに理解できるかと思います！