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

サイト構築 -JavaScript

Post on:2014年8月19日

sponsorsr

サイドバーを左右どちらからでもアニメーションでスライドさせるシンプルなjQueryのプラグインを紹介します。

Simple Sidebar
Simple Sidebar -GitHub

Simple Sidebarのデモ
Simple Sidebarの使い方

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を付与し、コンテンツ内にボタンを設置します。

//position-relative if this wrapper has no position relative, the plugin won't work correctly
<div id="wrapper">
    //all your content must go here.
    //Every POSITION-FIXED ELEMENT must be positioned outside of this wrapper.
    //Every POSITION-ABSOLUTE ELEMENT must be positioned inside a POSITION-RELATIVE div.
</div>

//position-fixed to top
<div id="navbar">
    <span id="button" class="icon icon-whatever"></span>
</div>

//position-fixed to left or right
<div id="sidebar" class="sidebar sidebar-whatever">
    //content of your sidebar
    <a class="close-sidebar" href="#">Link</a>
    <a class="close-sidebar" href="#">Link</a>
    <a class="close-sidebar" href="#">Link</a>
    <a class="close-sidebar" href="#">Link</a>
</div>

Step 3: JavaScript

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

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

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

<script>
    $('#sidebar').simpleSidebar({
        opener: '#button',
        wrapper: '#wrapper',
        sidebar: {
            align: 'right' //or 'left' - This option can be ignored, the sidebar will authomatically align to right.
            width: 300 //You can ingnore this option, the sidebar will authomatically size itselt to 300px.
            closingLinks: '.close-sidebar' // If you ignore this option, the plugin will lool for all links and can be buggy. Choose a class for every object inside the sidebar that once clicked will close the sidebar.
            css: {
                //Here you can add more css rules but you should use your own stylesheet.
                zIndex: 3000 //Choose the amount of zIndex you want. It must be the higher zIndex number.
            }
        }
    });
</script>