CSS3のみでハンバーガーメニューを作る方法

CSSだけでハンバーガーメニューを作れたので参考サイトと作り方をメモします。

参考サイト
https://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html

1. リストを作る
   

<div id="ham-menu">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

2.CSSをいじくる

#ham-menu{
  position: fixed;  
  height:100%;
  width: 300px;
  right: -300px;
  top: 0;
  background-color: #222;
  padding: 10px 40px;
  z-index: 999;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
  taransition: transform .3s linear 0s;
  }


#ham-nenu:before{
  position: absolute;
  width:50px;
  height: 50px;
  top: 0;
  right: 100%;
  content: "≡";
  text-align: center;
  font-size: 50px;
  color: #FFF;  
  line-height: 50px; /*縦位置中央化*/
  background-color: #222;
  z-index: 999;
  border-radius: 0 0 0 10px;
  display: block;
}


#menu-background{
  background-color: #222;
  display: block;
  height: 100%;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all .3s liner 0s;
  z-index: 999;
}

#ham-menu:hover{
  transform: translate(-300px);
}


#ham-menu:hover + #menu-background{
  opacity: .5s;
  z-index: 999;
}


li{
  list-style: none;
  padding: .5em 0;
}