【図解】横からスライドインするサイドメニューの作り方【 CSS + jQuery 】

<div id="menu" class="SlideOut">
  <ul>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
  </ul>
</div>

/* スライドメニューデザイン */
#menu {
  position: fixed;
  height: 100%;                         /* メニューの縦範囲 */
  width: 350px;                         /* メニューの横範囲 */
  max-width: 350px;                     /* メニューの横上限 */
  background-color: #222222;            /* メニューの背景色 */
  top: 70px;                            /* メニューの表示位置縦 */
  right: 0;                             /* メニューの表示位置横 */
  z-index: 10;                          /* メニューの重なり位置 */
}

#menu li {
  padding: 12px;                        /* 余白 */
  color: #EEEEEE;                       /* 文字色 */
  border-bottom: 1px solid #EEEEEE;     /* 区切線 */
  list-style-type: none;                /* リストデザイン無 */
}

<header id="header">
  <b>LOGO</b>
  <div id="menu_btn" class="openbtn">
    <span></span>
    <span></span>
    <span></span>
  </div>
</header>

<div id="menu" class="SlideOut">
  <ul>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
    <li>LINK</li>
  </ul>
</div>

<main>
  コンテンツ画面
</main>

/*====== 右に消えるアニメ ======*/
#menu.SlideOut {
	animation: SlideOut 0.5s forwards;
}
@keyframes SlideOut{
  from {
	  transform: translateX(0);
  }
  to {
	  transform: translateX(350px);
  }
}

/*====== 左に現れるアニメ ======*/
#menu.SlideIN {
	animation: SlideIN 0.5s forwards;
}
@keyframes SlideIN{
  from {
	  transform: translateX(350px);
  }
  to {
	  transform: translateX(0);
  }
}

// MENUボタンがクリックされたときの処理
$('#menu_btn').on('click', function(){
  SlideMenu()
});

// スライドメニュー関数
const SlideMenu = () => {
  if($('#menu').hasClass("SlideOut")){
    // スライドメニューが非表示なら表示
    $('#menu').removeClass('SlideOut');
    $('#menu').addClass('SlideIN');
  } else {
    // スライドメニューがあれば非表示
    $('#menu').removeClass('SlideIN');
    $('#menu').addClass('SlideOut');
  }
}