<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css">
<div class="container">
<h3>Float menu Icon yatendra</h3>
<div class="wrapper">
<div class="menu">
<ul class="toggle">
<li class="ico01"></li>
<li class="move-ico ico02"></li>
<li class="move-ico ico03"></li>
<li class="move-ico ico04"></li>
</ul>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="joint" />
</filter>
</defs>
</svg>
</div>
<div class="menu-object">
<ul class="toggle">
<li class="ico01"></li>
<li class="move-ico ico02">
<a href="https://codepen.io/hisamikurita" target="_blank" class="link link01">
<i class="fa fa-codepen"></i>
</a>
</li>
<li class="move-ico ico03">
<a href="https://github.com/hisamikurita" target="_blank" class="link link02">
<i class="fa fa-github"></i>
</a>
</li>
<li class="move-ico ico04">
<a href="" target="_blank" class="link link03">
<i class="fa fa-wikipedia-w"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
/* basic style */
.wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.wrapper {
display: flex;
justify-content: end;
align-items: center;
}
/* menu style */
.menu {
width: calc(54px * 4 + 30px * 3);
height: 54px;
margin: 0 auto;
-webkit-filter: url("#goo");
filter: url("#goo");
}
.wrapper ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.wrapper li {
width: 54px;
height: 54px;
border-radius: 50%;
cursor: pointer;
}
svg {
overflow: hidden;
}
.ico01 {
background-color: #d92567;
position: relative;
z-index: 4;
}
.ico02 {
background-color: #d91e85;
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 3;
}
.ico03 {
background-color: #f24405;
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
z-index: 2;
}
.ico04 {
background-color: #f23030;
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
z-index: 1;
}
.move-ico {
position: absolute;
top: 0;
}
.active .ico02 {
transform: translateX(calc(-54px - 30px));
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
}
.active .ico03 {
transform: translateX(calc(-54px * 2 - 30px * 2));
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
}
.active .ico04 {
transform: translateX(calc(-54px * 3 - 30px * 3));
transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
/* menu-object style */
.menu-object {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: calc(54px * 4 + 30px * 3);
height: 54px;
}
.menu-object .ico01::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 4px;
height: 24px;
margin: auto;
background-color: #fff;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.menu-object .ico01::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 24px;
height: 4px;
margin: auto;
background-color: #fff;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.menu-object .link {
display: block;
width: 100%;
height: 100%;
color: #fff;
line-height: 1;
}
.menu-object .link i {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.menu-object .link01 {
font-size: 26px;
}
.menu-object .link02 {
font-size: 30px;
}
.menu-object .link03 {
font-size: 24px;
font-weight: bold;
}
.active .menu-object .ico01::before {
transform: rotate(45deg);
}
.active .menu-object .ico01::after {
transform: rotate(45deg);
}
jQuery(document).ready(function(){
jQuery('.ico01').click(function(){
$('.wrapper').toggleClass('active');
});
});
