Reactでドロワーメニューを作る

Reactで作っているサイトの内部にドロワーメニューをつけたい!

というわけで、jQuery製のライブラリーをReact上で動かそうとしてみるも失敗。React用に公開されているパッケージをいくつか試してみるも失敗。いろいろやってみたのになぜか正常に動かない…。

仕方がないので自分で作ってみることにしました。なんとなく難しそうなイメージがあったのですが、いざ作り始めてみると思ってたよりも簡単でした。

完成品

 

画面遷移が起こる際にフェードイン・フェードアウトなどのアクションを挟み込める velocity-react というパッケージを使うとシンプルなコードで実装することができます。デモもいい感じです。

npm install velocity-react --save

まずnpmでパッケージをインストールしましょう。

 

コード

VelocityComponentはすでに存在している要素に対してアニメーションをつける際に利用し、VelocityTransitionGroupは要素を新しく追加したり、削除したりする際に利用します。

上記コードでは、ドロワーメニューのtranslateXをマイナスに指定して画面外に配置しておき、メニューを表示するボタンをクリックすると、translateXが0に移行し、アニメーションつきで表示されるように設定されています。

メニュー外側の黒い半透明のオーバーレイ部分はVelocityTransitionGroupで作っており、メニューがactiveになった際に要素が追加される形で表示されるようになっています。なぜオーバーレイを要素の追加・削除で実装しているかというと、オーバーレイ部分には、クリックするとメニューを閉じる関数が設定されており、メニューが表示されていない間は、オーバーレイの要素を削除することで、同時にそのクリック判定も消えるようにしているのです(ずっとオーバーレイのクリック判定が残っていると、コンテンツのリンクが機能しなくなります)

通常スタイルシートのdisplay: noneを設定すれば、クリック判定も消えるようなのですが、なぜかうまくいかなかったので、表示・非表示のたびに追加・削除する形で実装しています。

※ ドロワーメニューのコードは画面遷移で更新されない場所に設置してください。更新されるコンテンツの内部にメニューを設置すると、画面遷移とともにメニュー自体も再描画されて、ドロワーメニューが閉じるアクションが省略されてしまいます。できるだけ上の方の階層に設置することをおすすめします。

 

スタイルシート

デザインは各自好きなように編集してください。上記スタイルシートではMaterial iconsをリンク横に表示するデザインになっています。Material iconsを利用したい場合は公式サイトを確認してください。

 

シンプルなコードでカスタマイズも可能なドロワーメニューを設置したい方は、ぜひこの記事を参考にしてみてください。

 

参考リンク

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)