react-burger-menuライブラリを使ってインタラクティブなハンバーガーメニューを作ってみよう

こんにちわ。nap5です。

react-burger-menuライブラリを使ってインタラクティブなハンバーガーメニューを作ってみたので、紹介したいと思います。

react-burger-menuライブラリはこちらになります。

GitHub - negomi/react-burger-menu: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

公式のデモを関数コンポーネントライクに書き直してemotion化してみました。

デモサイトです。

Vite App

デモコードです。

intelligent-silence-clz7tz - CodeSandbox

モバイル実機で見た時のハンドリング等も入れてみました。主にオーバーフロー対策です。ナビのオーバーフローを確認するために、workリンクは適当に増やしています。実践ではここにパンくずに同期した、構造化リンクが並ぶことでしょう。

メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。

Nap5の部屋｜nap5

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

Tweets by napzak5

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

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

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

簡単ですが、以上です。