rsp2k/honeycomb-menu-2.markdown

## honeycomb-menu-2.markdown

      
    Raw
  

              honeycomb-menu-2.markdown
            
          
    HoneyComb menu 2

A Pen by David Snyder on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
  </head>
  <body>
    <div class="container" onclick="expand()">
      <div class="toggle" id="toggle">
        <button class="menu-btn" id="burger">
           <div class="bar1"></div>
           <div class="bar2"></div>
           <div class="bar3"></div>
        </button>
      </div>
    </div>
    <div class="menu" id="menu">

      <div class="item">
        <button class="menu-btn">
          <i class="icon fas fa-home"></i>
        </button>
      </div>

      <div class="item">
        <button class="menu-btn">
          <i class="icon fas fa-user"></i>
        </button>
      </div>

      <div class="item">
        <button class="menu-btn">
          <i class="icon fas fa-bell"></i>
        </button>
      </div>

      <div class="item">
        <button class="menu-btn">
          <i class="icon fas fa-envelope"></i>
        </button>
      </div>

      <div class="item">
        <button class="menu-btn">
          <i class="icon fas fa-video"></i>
        </button>
      </div>

      <div class="item">
        <button class="menu-btn">
          <i class="icon fas fa-search"></i>
        </button>
      </div>
    </div>
  </body>

</html>

## script.js
let j = 0;
let i = document.getElementById("menu").childNodes;
function expand() {
  toggleMenu();
  if(j==0)
  {
    j = 1;
    i[1].style.transform="translateY(-160px)";
    i[1].style.transition=".4s";
    i[3].style.transform="translateY(160px)";
    i[3].style.transition="1.1s";
    i[5].style.transform="translate(140px, 80px)";
    i[5].style.transition="1s";
    i[7].style.transform="translate(140px, -80px)";
    i[7].style.transition=".7s";
    i[9].style.transform="translate(-140px, 80px)";
    i[9].style.transition="1.4s";
    i[11].style.transform="translate(-140px, -80px)";
    i[11].style.transition="1.7s";
  } else {
    j = 0;
    i[1].style.transform="translateY(0) scale(0)";
    i[3].style.transform="translateY(0) scale(0)";
    i[5].style.transform="translateY(0) scale(0)";
    i[7].style.transform="translateY(0) scale(0)";
    i[9].style.transform="translateY(0) scale(0)";
    i[11].style.transform="translateY(0) scale(0)";
  }
}

function toggleMenu(){
  document.getElementById('burger').classList.toggle('change');
}


## style.css
body {
  background: #2a3a49;
  padding: 0;
  margin: 0;
}

.container, .menu {
  height: 140px;
  width: 160px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
  cursor: pointer;
}

button {
  cursor: pointer;
}

.menu{
  z-index: -1;
  transform: scale(1);
  transition: .4s;
}

.toggle {
  height: 0;
  width: 80px;
  border-bottom: 70px solid #f9d230;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
}

.toggle:before {
  content: "";
  height: 0;
  width: 80px;
  border-top: 70px solid #f9d230;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: absolute;
  top: 70px;
  left: -40px;
  justify-content: center;
  display: flex;
}

.item {
  height: 0;
  width: 80px;
  border-bottom: 70px solid #3d3d3d;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  transition: .8s;
}

.item:before {
  content: "";
  height: 0;
  width: 80px;
  border-top: 70px solid #3d3d3d;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  position: absolute;
  top: 70px;
  left: -40px;
  justify-content: center;
  display: flex;
}


.menu-btn {
  background: none;
  outline: none;
  border: none;
}

.bar1, .bar2, .bar3 {
  width: 60px;
  height: 12px;
  background-color: #333;
  margin-top: 6px;
  transition: 0.7s;
  border-radius: 8px;
  position: relative;
  top: 35px;
  right: 0px;
  display: flex;
}

button > .icon {
  color: #ccc;
  font-size: 60px;
  position: relative;
  top: 40px;
  left: 0px;
}

.change .bar1 {
  animation: x1 1s 1;
  transform: translateY(40px) rotate(45deg);
}

.change .bar2 {
/*   transition: .4s; */
  opacity: 0;
  width: 0;
  transform: translateX(-100px);
}

.change .bar3 {
  animation: x3 1s 1;
  transform: translateY(5px) rotate(-45deg);
}

@keyframes x3 {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(5px) rotate(-45deg);
  }
}

@keyframes x1 {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(40px) rotate(45deg);
  }
}

.change .bar1, .change .bar3 {
  top: 15px;
}

.slide {
  display: flex;
  justify-content: center:
}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
	</head>
	<body>
	<div class="container" onclick="expand()">
	<div class="toggle" id="toggle">
	<button class="menu-btn" id="burger">
	<div class="bar1"></div>
	<div class="bar2"></div>
	<div class="bar3"></div>
	</button>
	</div>
	</div>
	<div class="menu" id="menu">

	<div class="item">
	<button class="menu-btn">
	<i class="icon fas fa-home"></i>
	</button>
	</div>

	<div class="item">
	<button class="menu-btn">
	<i class="icon fas fa-user"></i>
	</button>
	</div>

	<div class="item">
	<button class="menu-btn">
	<i class="icon fas fa-bell"></i>
	</button>
	</div>

	<div class="item">
	<button class="menu-btn">
	<i class="icon fas fa-envelope"></i>
	</button>
	</div>

	<div class="item">
	<button class="menu-btn">
	<i class="icon fas fa-video"></i>
	</button>
	</div>

	<div class="item">
	<button class="menu-btn">
	<i class="icon fas fa-search"></i>
	</button>
	</div>
	</div>
	</body>

	</html>
	let j = 0;
	let i = document.getElementById("menu").childNodes;
	function expand() {
	toggleMenu();
	if(j==0)
	{
	j = 1;
	i[1].style.transform="translateY(-160px)";
	i[1].style.transition=".4s";
	i[3].style.transform="translateY(160px)";
	i[3].style.transition="1.1s";
	i[5].style.transform="translate(140px, 80px)";
	i[5].style.transition="1s";
	i[7].style.transform="translate(140px, -80px)";
	i[7].style.transition=".7s";
	i[9].style.transform="translate(-140px, 80px)";
	i[9].style.transition="1.4s";
	i[11].style.transform="translate(-140px, -80px)";
	i[11].style.transition="1.7s";
	} else {
	j = 0;
	i[1].style.transform="translateY(0) scale(0)";
	i[3].style.transform="translateY(0) scale(0)";
	i[5].style.transform="translateY(0) scale(0)";
	i[7].style.transform="translateY(0) scale(0)";
	i[9].style.transform="translateY(0) scale(0)";
	i[11].style.transform="translateY(0) scale(0)";
	}
	}

	function toggleMenu(){
	document.getElementById('burger').classList.toggle('change');
	}
	body {
	background: #2a3a49;
	padding: 0;
	margin: 0;
	}

	.container, .menu {
	height: 140px;
	width: 160px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	justify-content: center;
	cursor: pointer;
	}

	button {
	cursor: pointer;
	}

	.menu{
	z-index: -1;
	transform: scale(1);
	transition: .4s;
	}

	.toggle {
	height: 0;
	width: 80px;
	border-bottom: 70px solid #f9d230;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	}

	.toggle:before {
	content: "";
	height: 0;
	width: 80px;
	border-top: 70px solid #f9d230;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	position: absolute;
	top: 70px;
	left: -40px;
	justify-content: center;
	display: flex;
	}

	.item {
	height: 0;
	width: 80px;
	border-bottom: 70px solid #3d3d3d;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	transition: .8s;
	}

	.item:before {
	content: "";
	height: 0;
	width: 80px;
	border-top: 70px solid #3d3d3d;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	position: absolute;
	top: 70px;
	left: -40px;
	justify-content: center;
	display: flex;
	}


	.menu-btn {
	background: none;
	outline: none;
	border: none;
	}

	.bar1, .bar2, .bar3 {
	width: 60px;
	height: 12px;
	background-color: #333;
	margin-top: 6px;
	transition: 0.7s;
	border-radius: 8px;
	position: relative;
	top: 35px;
	right: 0px;
	display: flex;
	}

	button > .icon {
	color: #ccc;
	font-size: 60px;
	position: relative;
	top: 40px;
	left: 0px;
	}

	.change .bar1 {
	animation: x1 1s 1;
	transform: translateY(40px) rotate(45deg);
	}

	.change .bar2 {
	/* transition: .4s; */
	opacity: 0;
	width: 0;
	transform: translateX(-100px);
	}

	.change .bar3 {
	animation: x3 1s 1;
	transform: translateY(5px) rotate(-45deg);
	}

	@keyframes x3 {
	0% {
	transform: translate(0);
	}
	50% {
	transform: translateY(5px);
	}
	100% {
	transform: translateY(5px) rotate(-45deg);
	}
	}

	@keyframes x1 {
	0% {
	transform: translate(0);
	}
	50% {
	transform: translateY(40px);
	}
	100% {
	transform: translateY(40px) rotate(45deg);
	}
	}

	.change .bar1, .change .bar3 {
	top: 15px;
	}

	.slide {
	display: flex;
	justify-content: center:
	}