【jQuery】スライドメニューを簡単に実装する方法

スポンサーリンク
HTML・JavaScript..

こんにちは、ハル@haru_elpisです。

jQueryでスライドメニューを簡単に実装する備忘録です。

Slidebarsの使い方

ダウンロード

GitHub - adchsm/Slidebars: Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.
Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app. - adchsm/Slidebars

ダウンロードした「slidebars.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

当スタイルシートをhead内に、jquery.jsと当スクリプトをの上に記述します。

<head>
  ...
  <link rel="stylesheet" href="slidebars.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="slidebars.min.js"></script>
</body>

HTML

<div id="sb-site">
    <!-- メインのコンテンツ -->
</div>
 
<div class="sb-slidebar sb-left">
    <!-- サイドのコンテンツ(左) -->
</div>
 
<div class="sb-slidebar sb-right">
    <!-- サイドのコンテンツ(右) -->
</div>

Javascript

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

オプションの説明

.open(side)
指定したサイドのコンテンツをスライドします。
.toggle(side)
指定したサイドのコンテンツのトグル。
.close()
全てのサイドのコンテンツを閉じます。

コメント

タイトルとURLをコピーしました