こんにちは。
今回は使い勝手のいいドロワーメニューのjQueryプラグイン「Slidebars」！です。
横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！でも紹介した個人的に一番使い勝手のいいドロワーメニューのjQueryプラグイン「Slidebars」を紹介します。
使い勝手のいいドロワーメニューのjQueryプラグイン「Slidebars」！
Slidebars
jQueryプラグイン「Slidebars」をダウンロードしてみよう！
Slidebarsのサイトの「Download」のボタンをクリックしてダウンロードします。
jQueryプラグイン「Slidebars」の使い方
slidebars.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="css/slidebars.css"> |
jQuery本体とslidebars.jsを/bodyの手前に読み込みます。
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/slidebars.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script> (function($) { $(document).ready(function() { $.slidebars(); }); }) (jQuery); </script> |
html部分を記述します。
1 2 3 4 5 6 7 8 9 | <div id="sb-site"> <!--メインのコンテンツ--> <div class="sb-toggle-left"><a href="">MENU</a></div> <!--開閉ボタン--> </div> <div class="sb-slidebar sb-left"> <!--サイドのコンテンツ--> </div> |
メインのコンテンツにsb-siteというidを付けます。
開閉ボタンにはsb-toggle-leftというクラスを付けます。
サイドのコンテンツにはsb-slidebarとsb-leftというクラスを付けます。
右からの場合はそれぞれleftをrightに変更します。
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いかがでしたか。ドロワーメニューを導入する際に使ってみてはどうでしょうか。
以上で使い勝手のいいドロワーメニューのjQueryプラグイン「Slidebars」！でした。
