Cacher is the code snippet organizer for pro developers

  p {
    text-align: center;
  }

  .sidebar{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.64);
    position: fixed;
    color: #fff; /* 好みに応じて調節してください */
  }

    .sidebar a {
      color: #fff;
    }

    .sidebar.left {
      top: 0;
      left: 0;
      bottom: 0;
      width: 270px; /*この値は調節してください。*/
      background: #448AFF; /*背景色も好みに応じにて調節してください。*/
    }

    .sidebar.right {
      top: 0;
      right: 0;
      bottom: 0;
      width: 270px;
      background: #448AFF;
    }

    .sidebar.top {
      left: 0;
      right: 0;
      top: 0;
      height: 270px;
      background: #03A9F4;
    }

    .sidebar.bottom {
      left: 0;
      right: 0;
      bottom: 0;
      height: 270px;
      background: #03A9F4;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

/*!
 *  jQuery sidebar plugin
 *  ---------------------
 *  A stupid simple sidebar jQuery plugin.
 *
 *  Developed with <3 and JavaScript by jillix developers.
 *  Copyright (c) 2013-15 jillix
 * */(function(a){a.fn.sidebar=function(b){var c=this;if(c.length>1)return c.each(function(){a(this).sidebar(b)});var d=c.outerWidth(),e=c.outerHeight(),f=a.extend({speed:200,side:"left",isClosed:!1,close:!0},b);return c.on("sidebar:open",function(){var a={};a[f.side]=0,f.isClosed=null,c.stop().animate(a,f.speed,function(){f.isClosed=!1,c.trigger("sidebar:opened")})}),c.on("sidebar:close",function(a){var b={};f.side==="left"||f.side==="right"?b[f.side]=-c.outerWidth():b[f.side]=-c.outerHeight(),f.isClosed=null,c.stop().animate(b,f.speed,function(){f.isClosed=!0,c.trigger("sidebar:closed")})}),c.on("sidebar:toggle",function(a){f.isClosed?c.trigger("sidebar:open"):c.trigger("sidebar:close")}),!f.isClosed&&f.close&&c.hide().trigger("sidebar:close").one("sidebar:closed",function(){a(this).show()}),c},a.fn.sidebar.version="3.1.0"})(jQuery);  



$(document).ready(function () {
    // 向き
    var sides = ["left", "top", "right", "bottom"];

    // サイドバーの初期化
    for (var i = 0; i < sides.length; ++i) {
        var cSide = sides[i];
        $(".sidebar." + cSide).sidebar({side: cSide});
    }

    // ボタンのクリックにより...
    $(".btn[data-action]").on("click", function () {
        var $this = $(this);
        var action = $this.attr("data-action");
        var side = $this.attr("data-side");
        $(".sidebar." + side).trigger("sidebar:" + action);
        return false;
    });
  });

  <div id="header">
    <a href="http://dblog.hrgrweb.com/jquery-sidebar" title="記事ページに戻ります">← 記事ページに戻る</a>
  </div>
  <div id="container">
    <h1>jQuery Sidebar</h1>

    <!-- buttons -->
    <p><a href="#" class="btn" data-action="toggle" data-side="left">左サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="right">右サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="bottom">下サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="top">上サイドバーを表示・非表示</a></p>
    <!-- /buttons -->

  </div>
  <div id="footer">
    <a href="http://dblog.hrgrweb.com/jquery-sidebar" title="記事ページに戻ります">← 記事ページに戻る</a>
  </div>

  <!-- sidebars -->
  <div class="sidebar left">
    左サイドバー
    <p><a href="#" class="btn" data-action="toggle" data-side="left">左サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="right">右サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="bottom">下サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="top">上サイドバーを表示・非表示</a></p>
  </div>
  <div class="sidebar right">
    右サイドバー
    <p><a href="#" class="btn" data-action="toggle" data-side="left">左サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="right">右サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="bottom">下サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="top">上サイドバーを表示・非表示</a></p>
  </div>
  <div class="sidebar top">
    上サイドバー
    <p><a href="#" class="btn" data-action="toggle" data-side="left">左サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="right">右サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="bottom">下サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="top">上サイドバーを表示・非表示</a></p>
  </div>
  <div class="sidebar bottom">
    下サイドバー
    <p><a href="#" class="btn" data-action="toggle" data-side="left">左サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="right">右サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="bottom">下サイドバーを表示・非表示</a></p>
    <p><a href="#" class="btn" data-action="toggle" data-side="top">上サイドバーを表示・非表示</a></p>
  </div>
  <!-- /sidebars -->