[JS]サイドバーを左右からスライドさせるごくシンプルなスクリプト -Simple Sidebar

サイト構築 -JavaScript

Pocket

Simple Sidebarのデモ

デモはいくつか用意されており、スクリプトのページ自体にも適用されています。

デモ：デフォルト

左上のハンバーガーアイコンをクリックすると、左からサイドバーがスライド表示され、コンテンツにはマスクがかかります。

右からももちろん、できます。

デモ：right sidebar

左からのデモ。

デモ：left sidebar

Material Designにも相性がいいです。

デモ：Material Design

Simple Sidebarの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="js/jquery.simplesidebar.js"></script>
</head>

Step 2: HTML

サイドバーにはid/classを付与し、コンテンツ内にボタンを設置します。

<body>
<div>コンテンツ

<div class="toolbar">
  <div id="open-sb" class="menu-button menu-left"></div>
</div>
</div>

<div class="sidebar">サイドバー</div>

Step 3: JavaScript

jQueryのセレクタでサイドバーを指定し、左か右を指定します。

$( "$sidebar" ).simpleSidebar({
  sidebar: {
    align: 'left' //'right'
  }
});

オプションでは、オープン時のセレクタ、サイドバーの位置、コンテンツのマスクの色や不透明度を設定できます。

$( '#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)'
        }
    }
});