jQuery

スマホのドロワーメニューに使える【Slidebars】使い方

slidebars

今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。
ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。
横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww

こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。
また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。

実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。

実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。
デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。
また、コンテンツ内の【こちら】をクリックすると右からコンテンツ内容がスライド表示されます。

デモサイト

実際に利用する場合は、【Slidebars】から必要ファイルをダウンロードして下さい。

Slidebars

Slidebars 使い方

それでは、スマホのドロワーメニューの実装に使える【Slidebars】を使い方を説明していきたいと思います。
まずは、ナビゲーションメニューをスライド表示させる方法を紹介したいと思います。

実装するにあたりこちらより必要なファイルなどをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【slidebars.css】【slidebars.js】をhead内に読み込んで下さい。

下記の読み込み時のファイルの階層などは、ご自身の環境に合わせて変更して下さい。

<link rel="stylesheet" href="css/slidebars.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/slidebars.js"></script>

HTML

それでは、次にHTMLの準備をしていきます。
今回は、左からナビゲーションメニューをスライド表示するマークアップとなっています。

<body>

<!-- ▼メインコンテンツ▼ -->
<div id="sb-site">

<!-- ▼メニュー開閉ボタン▼ -->
<div class="menu sb-toggle-left"><a href="">MENU</a></div>
<!-- ▲メニュー開閉ボタン▲ -->

</div>
<!-- ▲メインコンテンツ▲ -->


<!-- ▼左側から表示されるメニューまたはコンテンツ▼ -->
<div class="sb-slidebar sb-left">
  <nav>
  	<ul class="sb-menu">
   		<li><a href="">Home</a></li>
        <li><a href="">Twitter</a></li>
        <li><a href="">Facebook</a></li>
        <li><a href="">Google +</a></li>
    </ul>
  </nav>
</div>
<!-- ▲左側から表示されるメニューまたはコンテンツ▲ -->

</body>

今回は、左からスライド表示させたいので、ドロワー部分は、div.sb-slidebarと.sb-leftでクラス名を付けています。
メニューの開閉ボタンにクラス名【sb-toggle-left】を付けています。

今回は、左からスライドでしたが、右から表示させる場合は、leftをrightに変更するだけです。
その他にも設定方法がありますので、こちらからもご確認頂けます。

JavaScript

次にスクリプトを記述していきます。

<script>
  (function($) {
    $(document).ready(function() {
      $.slidebars();
    });
  }) (jQuery);
</script>

上記まで記述すれば、【Slidebars】の実装の完了となります。
もしも、動作しない場合は、スライド表示するコンテンツと開閉ボタンが同じleftかrightになっているか確認してみてください。
実際にこちらのドロワーメニューに使える【Slidebars】のデモサイトもご用意していますので、ご覧ください。

デモサイト

デモサイトでナビゲーションに利用しているアイコンフォントは、【Font Awesome】を利用しています。

商用利用無料のWebアイコンフォント【Font Awesome】利用方法

その他オススメのスライドメニュー

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS smoothslider

WordPressコンテンツスライダーSmooth Slider使い方

NEXT buffer

超便利!! 過去記事をSNSに自動投稿するBuffer My Post使い方