Skip to content

Instantly share code, notes, and snippets.

@caputomarcos

caputomarcos/honeycomb-menu.markdown

Created July 10, 2022 04:30
Show Gist options
  • Save caputomarcos/565f50ebb67abe5ac02c9cacbafa751e to your computer and use it in GitHub Desktop.
Save caputomarcos/565f50ebb67abe5ac02c9cacbafa751e to your computer and use it in GitHub Desktop.
Download ZIP
Honeycomb Menu
Raw
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<div class="container">
<div class="toggle" id="toggle" onclick="expand()">
<i class="material-icons" id="add">add</i>
</div>
</div>
<div class="menu" id="menu">
<div class="item">
<a href="javascript:void();">
<i class="material-icons">home</i>
</a>
</div>
<div class="item">
<a href="javascript:void();">
<i class="material-icons">notifications</i>
</a>
</div>
<div class="item">
<a href="javascript:void();">
<i class="material-icons">mail</i>
</a>
</div>
<div class="item">
<a href="javascript:void();">
<i class="material-icons">add_a_photo</i>
</a>
</div>
<div class="item">
<a href="javascript:void();">
<i class="material-icons">videocam</i>
</a>
</div>
<div class="item">
<a href="javascript:void();">
<i class="material-icons">search</i>
</a>
</div>
</div>
</body>
Raw
script.js
var toggleChecker = 0;
var menuItems = document.getElementById("menu").childNodes;
function expand() {
if (toggleChecker === 0) {
document.getElementById("add").style.transform = "rotate(45deg)";
document.getElementById("menu").style.transform = "scale(1)"
menuItems[1].style.transform = "translateY(-160px)";
menuItems[3].style.transform = "translate(140px, -80px)";
menuItems[5].style.transform = "translate(140px, 80px)";
menuItems[7].style.transform = "translateY(160px)";
menuItems[9].style.transform = "translate(-140px,80px)";
menuItems[11].style.transform = "translate(-140px,-80px)"; toggleChecker = 1;
} else {
document.getElementById("add").style.transform = "rotate(0deg)";
document.getElementById("menu").style.transform = "scale(.9)"
menuItems[1].style.transform = "translateY(0)";
menuItems[3].style.transform = "translate(0)";
menuItems[5].style.transform = "translate(0)";
menuItems[7].style.transform = "translateY(0)";
menuItems[9].style.transform = "translate(0)";
menuItems[11].style.transform = "translate(0)";
toggleChecker = 0;
}
}
Raw
style.css
body {
background-color: #2a3a49;
margin: 0;
padding: 0
}
.container,.menu {
height: 140px;
width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.menu{
z-index: -1;
transform: scale(0.9);
}
.toggle {
height: 0;
width: 80px;
border-bottom: 70px solid coral;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
}
.toggle:before {
content: "";
height: 0;
width: 80px;
border-top: 70px solid coral;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
top: 70px;
left: -40px;
}
.item {
height: 0;
width: 80px;
border-bottom: 70px solid #fff;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
transition: all ease 1s;
}
.item:before {
content: "";
height: 0;
width: 80px;
border-top: 70px solid #fff;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
top: 70px;
left: -40px;
}
#add {
font-size: 5.5rem;
color: #fff;
position: relative;
top: 24px;
right: 5px;
transition: all ease 1s;
}
a>.material-icons{
color: #d2d2d2;
font-size: 60px;
transition: .3s ease;
}
a>.material-icons:hover {
color: coral;
transform: scale(1.3);
}
a{
position: relative;
top: 40px;
left: 10px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment