4PXMMenu

JavaScript

滑らかなアニメーションでモバイルサイトに最適なメニュー実装「4PXMMenu」

4PXMMenuはモバイルサイトに最適なメニューを実装することができるjQueryプラグインです。滑らかでさりげなく、美しいアニメーションでメニューを表示させることができます。モバイルサイトで使用するメニューを探している人は要チェックです。

4PXMMenu

デモ

デモページではブラウザ幅を768pxより小さくしないとメニューが表示されないようになっているので、画面にメニューがでていない場合はブラウザ幅を縮小してモバイル版に切り替える必要があります。

メニューの表示は、画面右上にハンバーガーアイコンとして表示されます。このアイコンをクリックすると、左から滑らかなスライドアニメーションとともにメニュー画面が表示されます。

また、それと同時にハンバーガーアイコンが「×」に変化します。このアイコンの変化もアニメーションで行われるので、とても素敵です。「×」をクリックすれば、メニューがスライドアニメーションとともに非表示になり元の状態に戻ります。

シンプルなメニューですが、さりげないアニメーションがとても優雅に感じて違和感なくメニューの表示・非表示が行えますね。使い方もカンタンなので、手軽に実装できるところもグッドです。

というわけで、モバイルサイトに活用したい滑らかなアニメーションによるメニューを実装できるjQueryプラグイン「4PXMMenu」のご紹介でした。

4PXMMenu

関連記事

  1. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  2. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  3. jQuery Pit-scheduler v2.0
  4. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

  5. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

  6. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP