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

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  2. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

  3. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  4. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  5. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  6. stickUp

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP