<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
  <title>kurutto</title>
</head>
<div class="wrap">
    <header>
      <span class="menu_btn"></span>
    </header>
    <nav class="main_nav">
      <ul>
        <li><a href="#">テキスト</a></li>
        <li><a href="#">テキスト</a></li>
        <li><a href="#">テキスト</a></li>
        <li><a href="#">テキスト</a></li>
        <li><a href="#">テキスト</a></li>
      </ul>
    </nav>
  </div>
</html>
a {
  text-decoration:none;
  color: #555;
}

li{
  list-style: none;
}

.wrap{
  width:300px;
  margin: 0 auto;
  position: relative;
}

.menu_btn{
  display: block;
  position: absolute;
  top:10px;
  right: 20px;
  z-index: 99;
  width: 30px;
  height: 30px;
  transition: 0.5s;
  background: url("http://life-thewild.com/wp-content/uploads/2016/11/menu.svg") no-repeat center;
}

.active{
  background: url("http://life-thewild.com/wp-content/uploads/2016/11/close.svg")no-repeat center;
  transform: rotateZ(90deg);
  animation: anime1 0.5s ease-in;
}

@keyframes anime1{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.main_nav{
  background: #bbb;
  transform: rotateY(90deg);
  transition: 0.5s;
}

.main_nav li{
  padding: 10px;
}

.active_nav{
  transform: rotateY(0deg);
}

.active_nav li:nth-child(1){
  animation: anime2 0.6s ease-in;
}

.active_nav li:nth-child(2){
  animation: anime2 0.7s ease-in;
}

.active_nav li:nth-child(3){
  animation: anime2 0.8s ease-in;
}

.active_nav li:nth-child(4){
  animation: anime2 0.9s ease-in;
}

.active_nav li:nth-child(5){
  animation: anime2 1s ease-in;
}

@keyframes anime2{
	0%{
		transform: rotateY(90deg);
	}
	100%{
    transform: rotateY(0deg);
	}
}
$(function(){
  $('.menu_btn').click(function(){
  		$('.menu_btn').toggleClass("active"),
  		$('.main_nav').toggleClass("active_nav")
  	 });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.