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つになるのではないでしょうか。

Lightroomの画像の数Lightroomのライブラリ内に表示されている画像の数を変更するやり方前のページ

アニメーションをつけれるカルーセルを実装できるjQueryプラグイン「Tikslus Carousel」次のページTikslus Carousel

関連記事

  1. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  3. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  4. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  5. gridscrolling.js
  6. Rainbow.js

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP