Sliiide

JavaScript

シンプルなスライディングメニューを実装できる「Sliiide」

Sliiideはシンプルなスライディングメニューを実装することができるjQueryプラグインです。上下左右と好きな位置からメニューをスライド表示させることができるので、自分のサイトにも合わせやすそうですね。

Sliiide

デモ

Left、Top、Right、Bottomのアイコンからスライドさせる位置を選択することができます。

例えば、Topを選択して左上にあるメニューアイコンをクリックすると、上からスライドしてきます。ちょっとした遊び心があって操作していて楽しいですね。

一般的なナビメニューじゃつまらないっていう方は、ぜひ一度チェックしてみてはいかがでしょうか。

こんな感じでオプションもいろいろと揃っています。placeでスライドさせる位置を指定することができます。

var settings = {
    toggle: "#sliiider-toggle",
    exit_selector: ".slider-exit",
    animation_duration: "0.5s",
    place: "left",
    animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)",
    body_slide: true,
    no_scroll: true
};

$('#menu').sliiide(settings);

Sliiide

関連記事

  1. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  2. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  3. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  4. jQlouds

    JavaScript

    ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

    jQloudsというjQueryプラグインを使えば、ふわふわした雲を実…

  5. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  6. PhotoJShop

    JavaScript

    写真にエフェクトやフィルタをかけることができるjQueryプラグイン「PhotoJShop」

    PhotoJShopというjQueryプラグインを使えば、写真にエフェ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP