Animated Toggle Menuは、シンプルでファイル容量も軽量、そして使い方も簡単なハンバーガーメニューを実装することができます。さりげないアニメーション付きで操作性もよく、スタイリッシュなハンバーガーメニューをWebサイトに取り入れたい人にはピッタリですね。
Animated Toggle Menu
以下、Animated Toggle Menuの実際のデモページになります。
デモでは、画面上部にハンバーガーアイコンが設置されていて、ここをクリックするとメニューが表示される仕組みです。メニュー表示中はハンバーガーアイコンはバツ印に切り替わり、背景にはオーバーレイがかかります。
バツ印をクリックすると、メニューが閉じられて元のハンバーガーアイコンに戻ります。デザイン・操作ともにシンプルでとても使いやすいメニューです。パソコンだけではなくスマホやタブレットとの相性もバッチリですね。
マークアップの記述もとてもシンプルでわかりやすいのがグッドです。Animated Toggle MenuのダウンロードやHTML・CSSなどの具体的なコードの記述は、以下のページに詳しく載っているので気になる人はぜひチェックしてみてください。
というわけで、シンプル・軽量で手軽に実装することができるハンバーガーメニュー「Animated Toggle Menu」の紹介でした。ライセンスはMITになります。
