こんにちは、ハル@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
github.com
ダウンロードした「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()
全てのサイドのコンテンツを閉じます。
コメント