hamburgersライブラリとreact-modern-drawerライブラリを組み合わせてハンバーガーメニューを作ってみよう

2022年8月3日 00:59

こんにちわ。nap5です。

hamburgersライブラリとreact-modern-drawerライブラリを組み合わせてハンバーガーメニューを作ってみたので、紹介したいと思います。

hamburgersライブラリはこちらです。

アニメーションのクラスを選択することでインタラクティブな開け閉めが実現できます。

react-modern-drawerライブラリはこちらです。

以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。

$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev

以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。

デモサイトです。

デモコードです。

今回はヘッダのアクセントですりガラスを入れてみました。
backdrop-filterで実現できます。

最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。

また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？