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. JQuery Portfolio
  2. notifier

    JavaScript

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

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

  3. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  4. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  5. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  6. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」

    Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量の…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP