こんにちは。 今回は横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ!です。 サイト制作する上で、もうスマホサイトやレスポンシブなサイトが当たり前になってきましたね。 今回はそんなスマホサイトやレスポンシブなサイトによさそうなドロワーメニューのプラグインを集めてみたので紹介します。 ※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。
![横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ!](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed2f8b7dcca29973a816cb97b521a130136b8ac4/height=288;version=1;width=512/https%3A%2F%2Fdesignmagazine.jp%2Fwp-content%2Fuploads%2F2014%2F12%2Fdrawer.png)
今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。 ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。 横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。 また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。 実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。 実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。 デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。
レスポンシブデザインが多くなってきている昨今にぴったりなカルーセルスライダーを紹介させて頂きます。 「Owl Carousel」というプラグインですが、 こちらのプラグインなにがぴったりなのかというと、 レスポンシブ対応なのはもちろんで、 タッチにも対応しており、 なんといっても一番いいのが、 オプションで、PC、ダブレット、スマホに合わせて、 アイテムの表示する数を変更出来るという点です。 他のプラグインでは、それようのオプションはなく、 自分でスクリプト書かなければいけませんでした。 幅の調整もできるので、自由度もあります。 デモがありますので、そちらをご覧下さい。 DEMO 設定の仕方 まずは、head内に以下のファイルを読み込みます。 <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="styl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く