slider Menu

JavaScript

メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

slider Menuはメニューリストをスムーズにスライダーメニューに変換するjQueryプラグインです。メニューはサイトのボリュームによって変わりますが、多くなるとそれだけメニューの記載領域も必要になります。それらをスライダーメニューに変換して、すっきりとしたデザインにすることが本プラグインを使用すれば可能になります。スマホサイトのように、表示領域やテキストの大きさを意識する場面には特に有効なプラグインだと思います。

それでは、slider Menuについて詳しく見ていきましょう。

slider Menu

デモ

  • わずか1.88kbで軽く使いやすい
  • ファースト&スムーズのCSS3アニメーション
  • 任意のHTMLで動作
  • 主要なブラウザには対応テスト済み

デモサイトを操作してみたところ、スピード感がありスムーズに動いてくれました。スライダーの表示は横にスライドするタイプと、プルダウンするタイプのふたつに使い分けられていました。新しいコンテンツの場合は横スライド、コンテンツ内の別ページならばプルダウンといったイメージです。

slider Menuは、現在使用しているHTMLでも導入が可能です。要素は<ul>と<li>要素で記載する必要があります。ただ、スライドとプルダウンとで記載が少し複雑なので、導入の際はダウンロードした[HTML]ファイルのデモをチェックしながらマークアップすることをおすすめします。

$('.my-menu').sliderMenu();

// Change the slide back link.
$('.my-menu').sliderMenu({
  back: '<span class="slider-menu__text">Back</span>'
});

対応ブラウザについては、Chrome 5・6、FF 51、Safari 10、IE 10でテスト済みとのことです。現在、IEは11と各ブラウザの最新バージョンは更新されていることもありますので、導入の際は最新バージョンでもチェックしてみてください。

簡単でシンプルなスライダーメニューが実装できますので、ぜひチェックしてみてください。

slider Menu

関連記事

  1. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  2. ResponsifyJS

    JavaScript

    画像で見せたいエリアを保持しながらレスポンシブにできる「ResponsifyJS」

    ResponsifyJSは画像のなかで見せたいエリアを保持させながらレ…

  3. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  4. How satisfied are you? Slider
  5. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  6. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

最近の記事

  1. ACC-TRBX
  2. ピスタチオ クリスマス ツリー フラペチーノ
  3. SF-G64T
  4. USB Type-C搭載ドッキングステーション

Facebookページ

PAGE TOP