<div class="sticky-menu-container">
<div class="inner-menu closed">
<ul class="menu-list">
<li class="menu-item">
<span class="item-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve">
<path id="XMLID_1160_" d="M46,27c-12.6,0-22.9,10.4-22.9,23.2c0,12.8,10.3,23.2,22.9,23.2s22.9-10.4,22.9-23.2
C68.9,37.4,58.6,27,46,27z M46,65.5c-8.2,0-14.9-6.8-14.9-15.2S37.8,35,46,35s14.9,6.8,14.9,15.2S54.2,65.5,46,65.5z M57.1,51.2
c-0.2,1.8-1.7,3-3.5,3c-0.2,0-0.3,0-0.5,0c-1.9-0.3-3.3-2-3-3.9c0.4-2.9-3-4.5-3.2-4.6c-1.7-0.8-2.5-2.9-1.7-4.6
c0.8-1.7,2.8-2.5,4.6-1.8C53,40.7,58,44.7,57.1,51.2z M49.4,55.6c0.7,0.7,1.2,1.8,1.2,2.8c0,1-0.4,2.1-1.2,2.8
c-0.8,0.7-1.8,1.2-2.8,1.2s-2.1-0.4-2.8-1.2c-0.7-0.8-1.2-1.8-1.2-2.8c0-1.1,0.4-2.1,1.2-2.8c0.8-0.8,1.8-1.2,2.8-1.2
S48.7,54.8,49.4,55.6z M88,26H72.6l-4.3-16c-0.5-1.7-2.1-3-3.9-3H27.5c-1.8,0-3.4,1.3-3.9,3l-4.3,16H4c-2.2,0-4,1.7-4,3.9V81
c0,2.2,1.8,4,4,4h84c2.2,0,4-1.8,4-4V29.9C92,27.7,90.2,26,88,26z M84,77H8V34h14.4c1.8,0,3.4-1.3,3.9-3l4.3-16h30.8l4.3,16
c0.5,1.7,2.1,3,3.9,3H84V77z"/>
</svg>
</span>
<span class="item-text">photo</span>
</li>
<li class="menu-item">
<span class="item-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="92px" height="92px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve">
<path id="XMLID_1960_" d="M76,2H16c-2.2,0-4,1.8-4,4v80c0,2.2,1.8,4,4,4h60c2.2,0,4-1.8,4-4V6C80,3.8,78.2,2,76,2z M72,82H20V10h52
V82z M28.5,65c0-2.2,1.8-4,4-4h27c2.2,0,4,1.8,4,4s-1.8,4-4,4h-27C30.3,69,28.5,67.2,28.5,65z M29.1,46c0-2.2,1.8-4,4-4h26.3
c2.2,0,4,1.8,4,4s-1.8,4-4,4H33.1C30.9,50,29.1,48.2,29.1,46z M29.1,27c0-2.2,1.8-4,4-4h26.3c2.2,0,4,1.8,4,4s-1.8,4-4,4H33.1
C30.9,31,29.1,29.2,29.1,27z"/>
</svg>
</span>
<span class="item-text">files</span>
</li>
<li class="menu-item">
<span class="item-icon"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="92px" height="92px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve">
<path id="XMLID_57_" d="M68.3,88c0,2.2-1.8,4-4.1,4H27.6c-2.3,0-4.1-1.8-4.1-4s1.8-4,4.1-4h14.8l0-6.8c0-1.9,1.6-3.5,3.6-3.5
c2,0,3.6,1.6,3.6,3.5l0,6.8h14.7C66.5,84,68.3,85.8,68.3,88z M67.4,29C67.4,29,67.4,29,67.4,29c-2,0-3.6,1.6-3.6,3.5l0,26
c0,1.5-0.6,2.9-1.6,3.9c-1,1-2.3,1.6-3.7,1.6c0,0,0,0,0,0l-25,0c-1.4,0-2.7-0.6-3.7-1.6c-1-1.1-1.6-2.4-1.6-3.9l0-26
c0-1.9-1.6-3.5-3.6-3.5c0,0,0,0,0,0c-2,0-3.6,1.6-3.6,3.5l0,26c0,3.3,1.3,6.5,3.6,8.8c2.4,2.4,5.5,3.7,8.9,3.7l25,0c0,0,0,0,0,0
c3.4,0,6.5-1.3,8.9-3.7c2.3-2.4,3.6-5.5,3.6-8.8l0-26C71,30.6,69.4,29,67.4,29z M35.2,56.3c-1.4-1.7-2.2-3.7-2.2-5.7l0-41.7
c0-2,0.8-4.1,2.3-5.8C36.9,1.1,39,0,41.1,0c0,0,0,0,0,0h9.7C55.4,0,59,4.8,59,8.8l0,41.6c0,4-3.6,8.6-8.1,8.6c0,0,0,0,0,0l-9.7,0.2
C39,59.2,36.8,58.2,35.2,56.3z M41.1,50.6c0,0.2,0.3,0.6,0.5,0.8l8.7,0c0.2-0.2,0.5-0.6,0.5-0.9l0-41.7c0-0.2-0.3-0.6-0.5-0.8
l-8.7,0c-0.2,0.2-0.5,0.7-0.5,0.9L41.1,50.6z"/>
</svg>
</span>
<span class="item-text">record</span></li>
<li class="menu-item">
<span class="item-icon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="92px" height="92px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve">
<path id="XMLID_1284_" d="M88,6H4c-2.2,0-4,1.8-4,4v51.1C0,63.3,1.8,65,4,65h47v17c0,1.7,1.3,3.2,2.8,3.8c0.5,0.2,1,0.2,1.5,0.2
c1.2,0,2.3-0.5,3.1-1.4L75,65h13c2.2,0,4-1.7,4-3.9V10C92,7.8,90.2,6,88,6z M84,57H73.2c-1.2,0-2.5,0.6-3.3,1.4L59,71.1v-10
c0-2.2-1.4-4.1-3.6-4.1H8V14h76V57z M18.6,28c0-2.2,1.8-4,4-4h29c2.2,0,4,1.8,4,4s-1.8,4-4,4h-29C20.4,32,18.6,30.2,18.6,28z
M62.5,31.1c-0.7-0.7-1.2-1.8-1.2-2.8c0-1.1,0.4-2.1,1.2-2.8c0.8-0.8,1.8-1.2,2.8-1.2c1.1,0,2.1,0.4,2.8,1.2
c0.7,0.7,1.2,1.8,1.2,2.8c0,1.1-0.4,2.1-1.2,2.8c-0.8,0.8-1.8,1.2-2.8,1.2C64.3,32.2,63.3,31.8,62.5,31.1z"/>
</svg>
</span>
<span class="item-text">new email</span>
</li>
</ul>
</div>
<div class="outer-button">
<div class="icon-container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve" class="close-icon">
<path id="XMLID_732_" d="M70.7,64.3c1.8,1.8,1.8,4.6,0,6.4c-0.9,0.9-2,1.3-3.2,1.3c-1.2,0-2.3-0.4-3.2-1.3L46,52.4L27.7,70.7
c-0.9,0.9-2,1.3-3.2,1.3s-2.3-0.4-3.2-1.3c-1.8-1.8-1.8-4.6,0-6.4L39.6,46L21.3,27.7c-1.8-1.8-1.8-4.6,0-6.4c1.8-1.8,4.6-1.8,6.4,0
L46,39.6l18.3-18.3c1.8-1.8,4.6-1.8,6.4,0c1.8,1.8,1.8,4.6,0,6.4L52.4,46L70.7,64.3z"/>
</svg>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve" class="arrow-icon">
<path id="XMLID_507_" d="M49.9,88c-0.2,0-0.4,0-0.6-0.1c-1.8-0.3-3.2-1.7-3.3-3.5l-3.5-34.8L7.6,46.1c-1.8-0.2-3.3-1.6-3.5-3.3
c-0.3-1.8,0.7-3.5,2.3-4.3l76-34.1c1.5-0.7,3.3-0.4,4.5,0.8c1.2,1.2,1.5,3,0.8,4.5l-34.1,76C52.9,87.1,51.4,88,49.9,88z M23.3,39.7
L46.4,42c1.9,0.2,3.4,1.7,3.6,3.6l2.4,23.1L76,16L23.3,39.7z"/>
</svg>
</div>
</div>
</div>
:root {
/* Animation Timing Function */
--primary-timing-func: cubic-bezier(0.86, 0, 0.07, 1);
/* Button Variables */
--button-radius: 60px;
--button-inner-ring-radius: 120px;
--button-outer-ring-radius: 100px;
--button-gradient: 135deg, rgba(244,87,116,1) 0%, rgba(229,69,139,1) 100%;
--main-background-color: #edc1c2;
/* Menu Variables */
--menu-radius: calc(var(--button-radius) - 2px);
--menu-height: 255px;
--menu-width: 245px;
--menu-border-radius: 10px;
--menu-bg-color: #141622;
--menu-timing-function: var(--primary-timing-func);
--menu-icon-size: 30px;
/* Close Icon */
--close-icon-timing-function: var(--primary-timing-func);
}
*{
box-sizing: border-box;
}
html,body{
height: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
svg{
fill: #FFFFFF;
}
body{
background-color: var(--main-background-color);
display: flex;
justify-content: center;
align-items: center;
}
.sticky-menu-container{
position: fixed;
right: calc(var(--button-radius));
bottom: calc(var(--button-radius));
display: flex;
align-items: center;
justify-content: center;
}
.sticky-menu-container .outer-button{
position: absolute;
height: var(--button-radius, 70px);
width: var(--button-radius, 70px);
border-radius: 50%;
background: rgb(244,87,116);
background: linear-gradient(var(--button-gradient));
background: linear-gradient(var(--button-gradient));
background: linear-gradient(var(--button-gradient));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 10px 10px 18px 5px rgba(0,0,0,0.2);
cursor: pointer;
}
.sticky-menu-container .outer-button .icon-container{
height: inherit;
width: inherit;
border-radius: inherit;
display: inherit;
align-items: inherit;
justify-content: inherit;
overflow: hidden;
position: relative;
cursor: inherit;
}
.sticky-menu-container .outer-button .close-icon{
transform: scale(0) rotate(-270deg);
opacity: 0;
height: 25px;
width: 25px;
position: absolute;
fill: #FFFFFF;
}
.sticky-menu-container .outer-button .arrow-icon{
height: 25px;
width: 25px;
position: absolute;
fill: #FFFFFF;
}
.sticky-menu-container .outer-button .arrow-icon.hiding-spot{
transform: translateX(calc(var(--button-radius) / -2)) translateY(calc(var(--button-radius) / 2));
opacity: 0;
}
.sticky-menu-container .outer-button .close-icon.show{
animation-duration: 1000ms;
animation-name: close-in;
animation-fill-mode: forwards;
animation-timing-function: var(--close-icon-timing-function);
}
.sticky-menu-container .outer-button .close-icon.hide{
animation-duration: 1000ms;
animation-name: close-out;
animation-timing-function: var(--close-icon-timing-function);
}
.sticky-menu-container .outer-button .arrow-icon.show{
opacity: 0;
animation-duration: 1000ms;
animation-name: arrow-in;
animation-fill-mode: forwards;
animation-timing-function: var(--close-icon-timing-function);
/* animation-delay: 250ms; */
}
.sticky-menu-container .outer-button .arrow-icon.hide{
animation-duration: 1000ms;
animation-name: arrow-out;
animation-fill-mode: forwards;
animation-timing-function: var(--close-icon-timing-function);
}
.sticky-menu-container .outer-button::after, sticky-menu-container.outer-button::before{
position: absolute;
display: inline-block;
content: "";
height: var(--button-inner-ring-radius);
width: var(--button-inner-ring-radius);
border-radius: 50%;
background-color:transparent;
border: 0px solid rgba(255,255,255,0.5);
opcacity: 0;
cursor: pointer;
}
.sticky-menu-container .outer-button.clicked::after{
animation-duration: 500ms;
animation-name: touch-click-inner;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.sticky-menu-container .outer-button::before{
height: var(--button-outer-ring-radius);
width: var(--button-outer-ring-radius);
}
.sticky-menu-container .outer-button.clicked::before{
animation-name: touch-click-outer;
animation-duration: 500ms;
animation-iteration-count: 1;
animation-delay: 250ms;
}
.sticky-menu-container .inner-menu{
position: absolute;
height: var(--menu-height);
width: var(--menu-width);
border-radius: var(--menu-border-radius);
background-color: var(--menu-bg-color);
/* transform: translate(calc(-50% + var(--button-radius) / 2), calc(-55% - var(--button-radius) / 2)); */
transform: translateX(-91px) translateY(-169px);
transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
/* transition-delay: 500ms; */
padding: 30px;
overflow: hidden;
box-shadow: 10px 10px 18px 5px rgba(0,0,0,0.4);
}
.sticky-menu-container .inner-menu > ul{
height: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
align-content: space-between;
margin: 0;
padding: 0;
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item{
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 3px;
width: 100%;
display: flex;
align-items: center;
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item{
overflow: hidden;
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-icon{
margin-right: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-icon > svg{
height: var(--menu-icon-size);
width: var(--menu-icon-size);
}
.sticky-menu-container .inner-menu.closed{
height: var(--menu-radius);
width: var(--menu-radius);
border-radius: 50%;
padding:0;
transform: unset;
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text{
opacity: 0;
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text.text-in{
animation-duration: 1500ms;
animation-name: text-in;
animation-fill-mode: forwards;
animation-timing-function: var(--close-icon-timing-function);
}
.sticky-menu-container .inner-menu > .menu-list > .menu-item.text-hides{
animation-duration: 200ms;
animation-name: text-hides;
animation-fill-mode: forwards;
animation-timing-function: var(--close-icon-timing-function);
}
@keyframes touch-click-inner {
50%{
transform: scale(0.375);
border-width: 30px;
opacity: 1;
}
100%{
transform: scale(1);
border-width: 1px;
opacity: 0;
}
}
@keyframes touch-click-outer {
0%{
border-width: 10px;
opacity: 0;
}
50%{
opacity: 0.2;
}
100%{
transform: scale(1.1);
opacity: 0;
}
}
@keyframes close-in{
0%{
transform: transform: scale(0) rotate(270deg);
opacity: 0;
}
100% {
transform: scale(1.1) rotate(0deg);
opacity: 1;
}
}
@keyframes close-out{
0%{
transform: scale(1.1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(0) rotate(270deg);
opacity: 0;
}
}
@keyframes arrow-out{
0%{
transform: translateX(0) translateY(0);
}
100%{
transform: translateX(calc(var(--button-radius) / 1.5)) translateY(calc(var(--button-radius) / -1.5));
}
}
@keyframes arrow-in{
0%{
transform: translateX(calc( -1 * var(--button-radius))) translateY(calc(var(--button-radius)));
opacity: 0;
}
100%{
transform: translateX(0) translateY(0);
opacity: 1;
}
}
@keyframes text-in{
0%{
opcaity: 1;
transform: translateY(50px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}
@keyframes text-hides{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
/*
https://www.instagram.com/p/ByuNUGkAVHk/
*/console.clear();
// var element = document.getElementById("slide-menu");
// element.addEventListener("animationstart", listener, false);
// element.addEventListener("animationend", listener, false);
// element.addEventListener("animationiteration", listener, false);
// function listener(event){
// console.log(event.elapsedTime)
// }
var isAnimating = false;
var isOpen = false;
var button = document.querySelector(".sticky-menu-container .outer-button");
var menu = document.querySelector(".sticky-menu-container .inner-menu");
var closeIcon = document.querySelector(".sticky-menu-container .outer-button .close-icon");
var arrowIcon = document.querySelector(".sticky-menu-container .outer-button .arrow-icon");
var menuItems = document.querySelectorAll(".sticky-menu-container .inner-menu > .menu-list > .menu-item");
var itemTexts = document.querySelectorAll(".sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text");
button.addEventListener("click", function(){
if(isAnimating) return;
this.classList.add("clicked");
menu.classList.toggle("closed");
if(isOpen){
closeIcon.classList.remove("show");
closeIcon.classList.add("hide");
arrowIcon.classList.remove("hide");
arrowIcon.classList.add("show");
menuItems.forEach(function(item){
console.log(item);
item.classList.add("text-hides");
});
itemTexts.forEach(function(text, index){
setTimeout(function(){
text.classList.remove("text-in");
});
});
isOpen = false;
}
else{
closeIcon.classList.remove("hide");
closeIcon.classList.add("show");
arrowIcon.classList.remove("show");
arrowIcon.classList.add("hide");
menuItems.forEach(function(item){
console.log(item);
item.classList.remove("text-hides");
});
itemTexts.forEach(function(text, index){
setTimeout(function(){
text.classList.add("text-in");
}, index*150);
});
isOpen = true;
}
});
button.addEventListener("animationstart", function(event){
isAnimating = true;
});
button.addEventListener("animationend", function(event){
isAnimating = false;
this.classList.remove("clicked");
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.