jQuery_Overlay_Menu

JavaScript

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

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

jQuery_Overlay_Menu

jQuery_Overlay_Menu

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

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

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

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

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

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

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

関連記事

  1. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  2. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  3. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  4. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  5. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  6. Vertical Fixed Navigation #2

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP