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

jQuery Pit-scheduler v2.0横軸の時系列でタスク管理ができるjQueryプラグイン「jQuery Pit-scheduler v2.0」前のページ

フォームに文字制限を設定できるjQueryプラグイン「Character Limit」次のページno-image

最近の記事

  1. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP