Slyder

JavaScript

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

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

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

デモ

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

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

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

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

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

Slyder

関連記事

  1. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  2. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

  3. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  4. OverlayScrollbars
  5. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  6. Frappe Charts

    JavaScript

    シンプルでモダンなSVGチャートを実装できる「Frappe Charts」

    Frappe Chartsは、シンプルでモダンなSVGチャート(グラフ…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP