javascript js + html + css - 汉堡菜单

Posted 2021-05-04

<-- HTML -->
<div class="hamburger-menu">
	<div class="bar"></div>	
</div>
<-- END HTML -->

<-- SCSS -->
//Меню гамбургер -------//
$bar-width: 50px;
$bar-height: 5px;
$bar-spacing: 12.5px;

.hamburger-menu {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: $bar-width;
	height: $bar-height + $bar-spacing*2;
	cursor: pointer;
}

.bar,
.bar:after,
.bar:before {
  width: $bar-width;
	height: $bar-height;
}

.bar {
	position: relative;
	transform: translateY($bar-spacing);
	background: rgba(205, 205, 205, 1);
	transition: all 0ms 300ms;
  
  &.animate {
    background: rgba(0, 0, 0, 0); 
  }
}

.bar:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: $bar-spacing;
	background: rgba(205, 205, 205, 1);
	transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
	content: "";
	position: absolute;
	left: 0;
	top: $bar-spacing;
	background: rgba(205, 205, 205, 1);
	transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
	top: 0;
	background-color: #ff0000;
	transform: rotate(45deg);
	transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}

.bar.animate:before {
	bottom: 0;
	background-color: #ff0000;
	transform: rotate(-45deg);
	transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
//-------------------------//
<-- END SCSS -->

<-- JS -->
(function () {
	$('.hamburger-menu').on('click', function() {
		$('.bar').toggleClass('animate');
	})
})();
<-- END JS -->