jQuery_Overlay_Menu

JavaScript

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

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

jQuery_Overlay_Menu

jQuery_Overlay_Menu

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

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

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

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

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

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

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

関連記事

  1. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  2. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  3. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  4. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  5. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  6. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP