jQuery_Overlay_Menu

JavaScript

フルスクリーンナビゲーションを表示できるハンバーガーメニュー実装「jQuery_Overlay_Menu」

jQuery_Overlay_Menuは、フルスクリーンによるナビゲーションを表示させるハンバーガーメニューを実装できるjQueryプラグインです。スタイリッシュなオーバーレイによるかっこいいフルスクリーンナビゲーションを取り入れたい人は要チェックです。

jQuery_Overlay_Menu

jQuery_Overlay_Menu

デモでは画面左上にハンバーガーメニューが表示されており、ここをクリックすると上からスライドダウンしながらオーバーレイによるフルスクリーンナビゲーションが表示されます。

ナビゲーションメニューが表示されているときは、ハンバーガーアイコンが「×」印に切り替わります。再度ここをクリックすると、今度はスライドアップで通常画面に戻ります。それと同時に、「×」印もハンバーガーアイコンに戻ります。

ナビゲーション開閉のアニメーション動作がわりと速めなので、さくさくとストレスなく表示・非表示できるのがいいですね。

また、デモはレスポンシブにも対応しているので画面幅を縮小してもそれに合わせて最適化されます。

ハンバーガーメニューのアイコンをクリックしないとナビゲーションメニューが表示されないので、Webサイトのデザインやレイアウトをスッキリさせたいという人には最適ですね。

難しい設定もなく機能性がシンプルな分、とても軽量なプラグインに仕上がっています。

というわけで、シンプルでスタイリッシュなフルスクリーンナビゲーションを表示するハンバーガーメニュー「jQuery_Overlay_Menu」のご紹介でした。

関連記事

  1. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  2. Bootstrap Show Password
  3. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  4. nanogallery2

    JavaScript

    美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

    nanogallery2はパーソナルニーズにピッタリなイメージギャラリ…

  5. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP