jQuery Slideout Menu

JavaScript

スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

jQuery Slideout Menuはメニューをスライドして表示させることができるjQueryプラグインです。実際のデモではメニューアイコンをクリックするとナビゲーションメニューがスライド表示してきます。普段はメニューが隠れているので、スペースの有効活用にもつながりますね。

[ads_center]

jQuery Slideout Menu

jQuery Slideout Menu

jQuery Slideout Menu

実際のデモでは、左上、真上、右上の3カ所にメニューアイコンが表示された状態になっています。

これらをクリックするとメニューがスライドしてきます。

メニューの位置によってスライド動作が変わるのがおもしろいですね。例えば、左上のメニューは左から右にスライドしてきますし、右上のメニューは右から左にスライドしてきます。

真上にあるメニューは上から下へスライドしてくるので、その位置に合ったスライド動作を実装することができます。

デモはレスポンシブにも対応しており、画面幅によっては若干スライド位置が変わってくると思います。

普段は非表示にしておいて、クリック時に表示させるナビゲーションメニューを実装したい時には、有力な選択肢の1つになるのではないでしょうか。

関連記事

  1. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  2. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  3. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  4. jquery countDownTimer
  5. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

最近の記事

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

アーカイブ

PAGE TOP