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

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

数値をインジケーターで見やすく表示できる「Bar Indicator」次のページBar Indicator

関連記事

  1. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  2. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  3. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  4. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  5. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  6. pixelate.js

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP