jQuery_Overlay_Menu

JavaScript

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

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

jQuery_Overlay_Menu

jQuery_Overlay_Menu

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

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

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

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

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

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

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

EasyZoomタッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」前のページ

スタイリッシュなスライドアニメーションがかっこいいjQueryスライダー「LC Micro Slider」次のページLC Micro Slider

関連記事

  1. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  2. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  3. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  4. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  5. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  6. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP