html SPメニューアイコン（ハンバーガーメニュー）

Posted 2021-05-11

.menu-icon {
  display: block;
  float: right;
  cursor: pointer;
  margin-top: -0.7%;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.menu-icon span {
  display: block;
  width: 2.5em;
  height: 0.3em;
  background: #FFF;
  margin-bottom: 0.5em;
  border-radius: 1px;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.menu-icon span.bar1 {
  margin-top: 0.5em;
}

.menu-icon.active {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-icon.active .bar1 {
  -webkit-transform: rotate(0deg) translateY(0.65em);
  -moz-transform: rotate(0deg) translateY(0.65em);
  -ms-transform: rotate(0deg) translateY(0.65em);
  -o-transform: rotate(0deg) translateY(0.65em);
  transform: rotate(0deg) translateY(0.65em);
}
.menu-icon.active .bar2 {
  opacity: 0;
}
.menu-icon.active .bar3 {
  -webkit-transform: rotate(-90deg) translateX(0.975em);
  -moz-transform: rotate(-90deg) translateX(0.975em);
  -ms-transform: rotate(-90deg) translateX(0.975em);
  -o-transform: rotate(-90deg) translateX(0.975em);
  transform: rotate(-90deg) translateX(0.975em);
}

// メニュースライドイン
$(function(){
    $('.menu-icon').click(function() {
        $(this).toggleClass('active');
        $('#navArea').toggle('slide', { direction: 'up' } );
    });
});

<div class="menu-icon sp">
	<span class="bar1"></span>
	<span class="bar2"></span>
	<span class="bar3"></span>
</div>