4PXMMenuはモバイルサイトに最適なメニューを実装することができるjQueryプラグインです。滑らかでさりげなく、美しいアニメーションでメニューを表示させることができます。モバイルサイトで使用するメニューを探している人は要チェックです。
4PXMMenu
以下、4PXMMenuの実際のデモページになります。
デモページではブラウザ幅を768pxより小さくしないとメニューが表示されないようになっているので、画面にメニューがでていない場合はブラウザ幅を縮小してモバイル版に切り替える必要があります。
メニューの表示は、画面右上にハンバーガーアイコンとして表示されます。このアイコンをクリックすると、左から滑らかなスライドアニメーションとともにメニュー画面が表示されます。
また、それと同時にハンバーガーアイコンが「×」に変化します。このアイコンの変化もアニメーションで行われるので、とても素敵です。「×」をクリックすれば、メニューがスライドアニメーションとともに非表示になり元の状態に戻ります。
シンプルなメニューですが、さりげないアニメーションがとても優雅に感じて違和感なくメニューの表示・非表示が行えますね。使い方もカンタンなので、手軽に実装できるところもグッドです。
というわけで、モバイルサイトに活用したい滑らかなアニメーションによるメニューを実装できるjQueryプラグイン「4PXMMenu」のご紹介でした。
4PXMMenuの詳しい実装方法やダウンロードに関しては以下のページからどうぞ。