4PXMMenu

JavaScript

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

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

4PXMMenu

デモ

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

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

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

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

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

4PXMMenu

関連記事

  1. no-image
  2. Maximum Characters limit exceeded warning
  3. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  4. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  5. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  6. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP