prof3ssorSt3v3/burger.html

## burger.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        background-color: hsl(220, 70%, 30%);
        padding: 10px;
        height: 60px;
        position: relative; /* for positioning of the center line */
      }
      .burger {
        position: absolute;
        top: 37px; /* 1/2 height plus top padding of box, less half burger height */
        left: 10px;
        background-color: white;
        width: 60px;
        height: 6px;
        line-height: 0;
        border-radius: 1px;
        transition: all 0.3s linear;
      }
      .burger::before,
      .burger::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 54px; /* same as burger less the border on either side */
        height: 0;
        border: 3px solid white; /* use border instead of content background */
        border-radius: 1px;
        transition: all 0.3s linear;
      }
      .burger::before {
        top: 0;
        transform-origin: left top;
        transform: rotate(0deg) translate(0, -16px);
      }
      .burger::after {
        bottom: 0;
        transform-origin: right top;
        transform: rotate(0deg) translate(0, 16px);
      }

      .x .burger {
        /* opacity: 0; this and display:none; will impact the :before and :after parts */
        background-color: transparent;
      }
      .x .burger::before {
        /* round corners and animate the movement */
        border-radius: 6px;
        transform: translate(10px, -20px) rotate(45deg);
      }
      .x .burger::after {
        /* round corners and animate the movement */
        border-radius: 6px;
        transform: translate(-10px, -20px) rotate(-45deg);
      }
    </style>
  </head>
  <body>
    <div class="box x">
      <div class="burger"></div>
    </div>
    <script>
      document.body.addEventListener("click", ev =>
        document.querySelector(".box").classList.toggle("x")
      );
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	}
	.box {
	background-color: hsl(220, 70%, 30%);
	padding: 10px;
	height: 60px;
	position: relative; /* for positioning of the center line */
	}
	.burger {
	position: absolute;
	top: 37px; /* 1/2 height plus top padding of box, less half burger height */
	left: 10px;
	background-color: white;
	width: 60px;
	height: 6px;
	line-height: 0;
	border-radius: 1px;
	transition: all 0.3s linear;
	}
	.burger::before,
	.burger::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 54px; /* same as burger less the border on either side */
	height: 0;
	border: 3px solid white; /* use border instead of content background */
	border-radius: 1px;
	transition: all 0.3s linear;
	}
	.burger::before {
	top: 0;
	transform-origin: left top;
	transform: rotate(0deg) translate(0, -16px);
	}
	.burger::after {
	bottom: 0;
	transform-origin: right top;
	transform: rotate(0deg) translate(0, 16px);
	}

	.x .burger {
	/* opacity: 0; this and display:none; will impact the :before and :after parts */
	background-color: transparent;
	}
	.x .burger::before {
	/* round corners and animate the movement */
	border-radius: 6px;
	transform: translate(10px, -20px) rotate(45deg);
	}
	.x .burger::after {
	/* round corners and animate the movement */
	border-radius: 6px;
	transform: translate(-10px, -20px) rotate(-45deg);
	}
	</style>
	</head>
	<body>
	<div class="box x">
	<div class="burger"></div>
	</div>
	<script>
	document.body.addEventListener("click", ev =>
	document.querySelector(".box").classList.toggle("x")
	);
	</script>
	</body>
	</html>