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. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  2. jQuery UI Month Picker Plugin
  3. nanoGALLERY
  4. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  5. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  6. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP