ハンバーガーメニュー

<header class="header"> <div class="wrapper header_wrap"> <h1 class="header_ttl">KATSU portforio</h1> <nav class="header_nav"> <ul> <li><a>service</a></li> <li><a>portfolio</a></li> <li><a>skill</a></li> <li><a>price</a></li> <li><a>profile</a></li> <li><a>contact</a></li> </ul> </nav> <button class="menu-btn"><span></span></button> </div> </header>

@media screen and (max-width: 768px) {
.wrapper {
width: 100%;
padding: 0 1vw;
}
.header_nav {
display: none;
}

/* ハンバーガーメニュー */
.menu-btn {
cursor: pointer;
position: relative;
display: block;
border-radius: 2px;
width: 32px;
z-index: 20;
}
.menu-btn span {
position: relative;
display: block;
height: 32px;
z-index: 3;
}
.menu-btn:before,
.menu-btn span:before,
.menu-btn span:after {
content: "";
position: absolute;
left: 6px;
right: 6px;
top: 50%;
height: 2px;
border-radius: 2px;
margin-top: -1px;
background-color: #5b77b6;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.menu-btn span:before {
-webkit-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
.menu-btn span:after {
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
-o-transform: translateY(6px);
transform: translateY(6px);
}
/* メニューを開いた状態のハンバーガー */
.menu-btn.open:before {
opacity: 0;
}
.menu-btn.open span:before {
transform: translateY(0) rotate(45deg);
}
.menu-btn.open span:after {
transform: translateY(0) rotate(-45deg);
}
}