Slyder

JavaScript

レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

Slyderはレスポンシブに対応したスライダーナビゲーションを実装できるjQueryプラグインです。下(または上)の階層にあるメニューへ行くとスライドで表示されます。サクサク動作するので、スピード感を演出するナビゲーションをつくりたいときなどに活用してみてはいかがでしょうか。

スライドでサクサクとメニューを見れる

デモ

Getting startedというメニューにあるQuestion 1〜3の各項目のいずれかをクリックすると、スライドで子メニューが表示されます。このようにどんどんスライドしながら下の階層にあるメニューへ行くことができます。逆に、上の階層へもどるときもスライドされます。

たくさんあるメニューもスッキリ整理されるし、サクサク目的のメニューを探せるのでストレスも少なそうですね。

使い方も非常にシンプルなところがグッドです。気軽にスライドナビゲーション実装できると思います。

また、オプションには、back、current、hidden、item、link、wrapperといったものが用意されています。ちょっとしたカスタマイズもできて、とても便利です。

というわけで、レスポンシブに対応したスライダーナビゲーションをサクッと取り入れたい人は、ぜひ使われてみてはいかがでしょうか。

Slyder

Product Builderカスタマイズ性に優れたオンラインストアに役立つ「Product Builder」前のページ

スクロールで背景カラーを変化させる「Changing Background Color while scrolling」次のページChanging Background Color while scrolling

関連記事

  1. jQlouds

    JavaScript

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

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

  2. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  3. imgViewer2

    JavaScript

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

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

  4. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  5. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  6. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP