css3を使ったドロワーメニュー - WEBサイト制作の勉強

右端から出てくるドロワーメニュー

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドロワーメニュー</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
 $('#btn').on('click',function(){
  $('#g-nav').toggleClass('slide');
  $(this).toggleClass('click');
 });
});
</script>
</head>

<body>
<header>
<div class="header-inner">
<h1>タイトル</h1>
<p id="btn"><span></span></p>
<nav id="g-nav">
<ul>
<li><a href="#">ボタン１</a></li>
<li><a href="#">ボタン２</a></li>
<li><a href="#">ボタン３</a></li>
</ul>
</nav>
</div>
</header>
<main>
</main>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
header {
  background:#4B4949;
  width:100%;
  height:80px;
  padding:10px 0;
  box-sizing:border-box;
}
.header-inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
}
h1 {
  color:#FFFFFF;
  line-height:60px;
  padding-left:20px;
}
#g-nav {
  width:50%;
  background:#C71215;
}
#g-nav ul {
  display:flex;
}
#g-nav li {
  width:33.33%;
  height:60px;
}
#g-nav li a {
  display:block;
  line-height:60px;
  text-align:center;
  color:#FFF;
}
main {
  width:100%;
  height:calc(100vh - 80px);
  background:url(img/01.png) no-repeat center center/cover;
}
#btn {
  display:none;
}
@media screen and (max-width:767px){
 body {
   overflow-x:hidden;
 }
#g-nav {
  width:100%;
  height:calc(100vh - 80px);
  background:rgba(191,27,30,0.40);
  position: fixed;
  top:80px;
  left:100%;
  transition:0.3s;
}
#g-nav.slide {
  left:0;
}
#btn {
  display:block;
  width:60px;
  height:60px;
  margin-right:10px;
  position:relative;
}
#btn span {
  display:block;
  width:40px;
  height:2px;
  background:#FFF;
  position:absolute;
  top:0;
  right:0;
  bottom:18px;
  left:0;
  margin:auto;
  transition:0.1s;
}
#btn span:after {
  display:block;
  content:"";
  width:40px;
  height:2px;
  background:#FFF;
  position:absolute;
  top:36px;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
   transition:0.1s;
}
#btn.click span {
  bottom:0;
  transform:rotate(-45deg);
}
#btn.click span:after {
  top:0;
 transform:rotate(-270deg);
}
#g-nav ul {
  display:flex;
  flex-direction:column;
  margin-left:30%;
  width:70%;
  box-sizing:border-box;
  height:calc(100vh - 80px);
   background:rgba(0,0,0,0.60);
}
#g-nav li {
  width:100%;
  height:60px;
  border-bottom:1px solid #FFF;
}
#g-nav li a {
  display:block;
  line-height:60px;
  padding-left:20px;
  box-sizing:border-box;
  text-align:left;
  color:#FFF;
}
}