やるしかなっちゃん

やるしかない!

ライブラリを使わない生のJavaScriptだけで作るドロワーメニュー

めちゃくちゃシンプルなやつだけど作った
最早jQueryさえも使わない縛り
jsfiddle.net

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <header class="header">
    <div id="open-btn" class="open-btn show" onclick="openMenu();"><span></span></div>
    <div id="close-btn" class="close-btn hide" onclick="closeMenu();"><span></span></div>
  </header>

  <div class="wrapper">
    <div id="content" class="content">
    </div>
    <div class="menu back">
    </div>
  </div>

</body>
</html>
body {
  margin: 0;
}

.header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid black;
  position: relative;
}

.header .open-btn {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 10px;
}

.header .close-btn {
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 10px;
}
/* ここまでは見た目整える用の関係ないCSS */

/* ここから必要なCSS */
.show {
  display: block;
}
.hide {
  display: none;
}

.back {
  z-index: -999
}

.wrapper {
  position: relative;
  width: 100%;
  height: 900px;
}

.wrapper .content {
  width: 100%;
  height: 100%;
  background: blue;
  position: absolute;
  top: 0%;
  right: 0%;
}

.wrapper .menu {
  width: 30%;
  height: 100%;
  background: red;
  position: absolute;
  top: 0%;
  right: 0%;
}
function openMenu() {
  // メニューボタンの切り替え
  var openBtn = document.getElementById("open-btn");
  var closeBtn = document.getElementById("close-btn");
  openBtn.classList.remove('show');
  openBtn.classList.add('hide');
  closeBtn.classList.remove('hide');
  closeBtn.classList.add('show');

  // メニュー開く
  var content = document.getElementById("content");
  var position = 0;
  var timerId = setInterval(function() {
    if (position == 30) clearInterval(timerId);
    content.style.right = position++ + '%';
  }, 10);

}

function closeMenu() {
  // メニューボタンの切り替え
  var openBtn = document.getElementById("open-btn");
  var closeBtn = document.getElementById("close-btn");
  openBtn.classList.remove('hide');
  openBtn.classList.add('show');
  closeBtn.classList.remove('show');
  closeBtn.classList.add('hide');

  // メニュー閉じる
  var content = document.getElementById("content");
  var position = 30;
  var timerId = setInterval(function() {
    if (position == 0) clearInterval(timerId);
    content.style.right = position-- + '%';
  }, 10);
}

開く/閉じるボタンはclassの付け替えを行い表示<->非表示の切り替えをしているだけ。

肝心のコンテンツエリアとメニューエリアは初期表示時はメニューエリアのz-indexに負の値を指定しておき裏側に忍ばせておく(.back)。
コンテンツエリアは絶対位置で配置しておいて、開くボタンを押したらsetIntervalを利用して一定間隔で少しずつ左にずらしていく(rightプロパティの値を一定値ずつ加算していく)というだけのシンプルな作り。