Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示する方法をご紹介します。
Contents
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するCSS記述
※slidebars.cssファイルを読み込みます。サイドバー以外のエリア(canvas=container)とサイドバーのエリア(off-canvas)のCSS記述です。必要に応じて変更して下さい。
<link rel="stylesheet" href="slidebars.css"> <style> html, body { margin: 0; } h1{ text-align: center; font-size: 20px; padding: 20px 0; width: 100%; line-height: 1.4em; } h4{ padding-top: 15px; } [canvas=container], [off-canvas] { padding: 10px 20px; } [off-canvas] { background-color: #8ED2DD; } [class*=js-] { cursor: pointer; } </style>
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するHTML記述
※サイドバー以外のエリア(canvas=”container”)とサイドバーのエリア(off-canvas=”slidebar-1 left reveal”、off-canvas=”slidebar-2 right shift”、off-canvas=”slidebar-3 top push”)を用意します。
<div canvas="container"> <h1>slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示します。<br>以下のボタンをクリックしてみて下さい。</h1> <h4>左スライドバーコントロール</h4> <p> <button class="js-open-left-slidebar">左サイドバーオープン</button> <button class="js-close-left-slidebar">左サイドバークローズ</button> <button class="js-toggle-left-slidebar">左サイドバーオープン・クローズ切替</button> </p> <h4>右サイドバーのコントロール</h4> <p> <button class="js-open-right-slidebar">右サイドバーオープン</button> <button class="js-close-right-slidebar">右サイドバークローズ</button> <button class="js-toggle-right-slidebar">右サイドバーオープン・クローズ切替</button> </p> <h4>上部のスライドバー コントロール</h4> <p> <button class="js-open-top-slidebar">上サイドバーオープン</button> <button class="js-close-top-slidebar">上サイドバークローズ</button> <button class="js-toggle-top-slidebar">上サイドバーオープン・クローズ切替</button> </p> </div> <div off-canvas="slidebar-1 left reveal"> <p>左サイドエリアを表示してます。</p> </div> <div off-canvas="slidebar-2 right shift"> <p>右サイドエリアを表示してます。</p> </div> <div off-canvas="slidebar-3 top push"> <p>上サイドエリアを表示してます。</p> </div>
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するJavaScriptの記述
※jquery.min.js(v1.12.2)、slidebars.jsファイルを読み込みます。サイドバーをオープンする場合「controller.open(‘サイドバーエリア’)」、クローズする場合「controller.close(‘サイドバーエリア’)」、オープン・クローズ切替表示する場合「controller.toggle(‘サイドバーエリア’)」を記述します。
} );
<script src="jquery.min.js"></script> <script src="slidebars.js"></script> <script type="text/javascript"> ( function ( $ ) { // スライドバーの新しいインスタンスを作成 var controller = new slidebars(); // スライドバーの初期化 controller.init(); // 左スライドバーコントロール $( '.js-open-left-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.open( 'slidebar-1' ); } ); $( '.js-close-left-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.close( 'slidebar-1' ); } ); $( '.js-toggle-left-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.toggle( 'slidebar-1' ); } ); // 右スライドバーコントロール $( '.js-open-right-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.open( 'slidebar-2' ); } ); $( '.js-close-right-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.close( 'slidebar-2' ); } ); $( '.js-toggle-right-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.toggle( 'slidebar-2' ); } ); // 上部のスライドバー コントロール $( '.js-open-top-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.open( 'slidebar-3' ); } ); $( '.js-close-top-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.close( 'slidebar-3' ); } ); $( '.js-toggle-top-slidebar' ).on( 'click', function ( event ) { event.stopPropagation(); controller.toggle( 'slidebar-3' ); } ); } ) ( jQuery ); </script>
slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するデモページ
slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するデモページ
ソース元:GitHun – adchsm / Slidebars
GitHun – adchsm / Slidebars.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告