slider Menuはメニューリストをスムーズにスライダーメニューに変換するjQueryプラグインです。メニューはサイトのボリュームによって変わりますが、多くなるとそれだけメニューの記載領域も必要になります。それらをスライダーメニューに変換して、すっきりとしたデザインにすることが本プラグインを使用すれば可能になります。スマホサイトのように、表示領域やテキストの大きさを意識する場面には特に有効なプラグインだと思います。
それでは、slider Menuについて詳しく見ていきましょう。
slider Menu
slider Menuの実際のデモページは以下になります。
slider Menuの特徴は下記になります。
- わずか1.88kbで軽く使いやすい
- ファースト＆スムーズのCSS３アニメーション
- 任意のHTMLで動作
- 主要なブラウザには対応テスト済み
デモサイトを操作してみたところ、スピード感がありスムーズに動いてくれました。スライダーの表示は横にスライドするタイプと、プルダウンするタイプのふたつに使い分けられていました。新しいコンテンツの場合は横スライド、コンテンツ内の別ページならばプルダウンといったイメージです。
slider Menuは、現在使用しているHTMLでも導入が可能です。要素は<ul>と<li>要素で記載する必要があります。ただ、スライドとプルダウンとで記載が少し複雑なので、導入の際はダウンロードした［HTML］ファイルのデモをチェックしながらマークアップすることをおすすめします。
［js］ファイルへは、リストメニューをスライダ－メニュー変換するために下記を記載します。
$('.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と各ブラウザの最新バージョンは更新されていることもありますので、導入の際は最新バージョンでもチェックしてみてください。
簡単でシンプルなスライダーメニューが実装できますので、ぜひチェックしてみてください。
ダウンロードや詳しい使い方は以下からどうぞ。
