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. RELLAX

    JavaScript

    超軽量で滑らかなパララックスを実装できるライブラリ「RELLAX」

    RELLAXは、滑らかなパララックスを実装できるバニラJavaScri…

  2. Pushbar.js

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  3. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  4. Zoomerang.js
  5. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  6. ScrollTrigger

    JavaScript

    スクロールの位置をベースにしたアニメーション「ScrollTrigger」

    ScrollTriggerはユーザーがスクロールする位置をベースにした…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP