【jQuery】サイドバーをスライドで表示できるSimple Sidebar


【jQuery】サイドバーをスライドで表示できるSimple Sidebar
メニューアイコン(バーガーボタン)をクリックするとサイドバーがスライド表示されメニュー以外のコンテンツにはマスクが掛かります。サイドバーの設置(右か左か)の設定やマスクの色や透明度の設定も簡単に設定できます。
Simple Sidebar
Githubに公開されてますのでjquery.simplesidebar.jsをダウンロードしてください。
使い方はjqueryとダウンロードした「jquery.simplesidebar.min.js」を読み込ませます。
Java File
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.simplesidebar.min.js"></script>
例としてサイドバーの要素を.sidebarとした場合
html
<div class="toolbar"> <div id="open-sb" class="menu-button menu-left"></div> </div> <div class="sidebar"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> </div>
Java Scriptでサイドバーを左右どちらに設置するかや、マスクの色・透明度の設定します。
Java
$( '.sidebar' ).simpleSidebar({ settings: { opener: ".button", wrapper: "#wrapper", }, sidebar: { align: "left", //サイドバーを左右どちらに設置するか設定 width: 250, //サイドバーの幅 closingLinks: "a", style: { zIndex: 100 } }, mask: { //コンテンツにかかるマスクの設定 style: { backgroundColor: "grey", //カラー opacity: 0.9, //透明度 filter: 'Alpha(opacity=90)' } } });
RELATED POSTS