<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 href="https://fonts.googleapis.com/css?family=Roboto" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="zoom">
<a class="zoom-fab zoom-btn-large" id="zoomBtn"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
<ul class="zoom-menu">
<li><a class="zoom-fab zoom-btn-sm zoom-btn-person scale-transition"><i class="fa fa-user"></i></a></li>
<li><a class="zoom-fab zoom-btn-sm zoom-btn-doc scale-transition"><i class="fa fa-book"></i></a></li>
<li><a class="zoom-fab zoom-btn-sm zoom-btn-tangram scale-transition"><i class="fa fa-dashboard"></i></a></li>
<li><a class="zoom-fab zoom-btn-sm zoom-btn-report scale-transition"><i class="fa fa-edit"></i></a></li>
<li><a class="zoom-fab zoom-btn-sm zoom-btn-feedback scale-transition"><i class="fa fa-bell"></i></a></li>
</ul>
<div class="zoom-card scale-transition scale-out">
<ul class="zoom-card-content">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
.zoom {
position:relative;
float:right;
}
.zoom-fab {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background-color: #f1f1f1;
vertical-align: middle;
text-decoration: none;
text-align: center;
transition: 0.2s ease-out;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
cursor: pointer;
color: #FFF;
}
.zoom-fab:hover {
background-color: #ddd;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.zoom-btn-large {
width: 60px;
height: 60px;
line-height: 60px;
}
.zoom-menu {
position: absolute;
right: 90%;
top: 70%;
transform: translateY(-50%);
height: 100%;
width: 500px;
list-style: none;
text-align: right;
color:#fff;
}
.zoom-menu li {
display: inline-block;
margin-right: 10px;
}
.zoom-card {
position: absolute;
right: 150px;
bottom: 70px;
transition: box-shadow 0.25s;
padding: 24px;
border-radius: 2px;
background-color: #009688;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
color: #FFF;
}
.zoom-card ul {
-webkit-padding-start: 0;
list-style: none;
text-align: left;
}
.zoom-btn-person { background-color: #F44336; }
.zoom-btn-person:hover { background-color: #e57373; }
.zoom-btn-doc { background-color: #ffeb3b; }
.zoom-btn-doc:hover { background-color: #fff176; }
.zoom-btn-tangram { background-color: #4CAF50; }
.zoom-btn-tangram:hover { background-color: #81c784; }
.zoom-btn-report { background-color: #2196F3; }
.zoom-btn-report:hover { background-color: #64b5f6; }
.zoom-btn-feedback { background-color: #9c27b0; }
.zoom-btn-feedback:hover { background-color: #ba68c8; }
.scale-transition { transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; }
.scale-transition.scale-out {
transform: scale(0);
transition: transform 0.2s !important;
}
.scale-transition.scale-in { transform: scale(1); }
$(document).ready(function(){
$('#zoomBtn').click(function() {
$('.zoom-btn-sm').toggleClass('scale-out');
if (!$('.zoom-card').hasClass('scale-out')) {
$('.zoom-card').toggleClass('scale-out');
}
});
$('.zoom-btn-sm').click(function() {
var btn = $(this);
var card = $('.zoom-card');
if ($('.zoom-card').hasClass('scale-out')) {
$('.zoom-card').toggleClass('scale-out');
}
if (btn.hasClass('zoom-btn-person')) {
card.css('background-color', '#d32f2f');
} else if (btn.hasClass('zoom-btn-doc')) {
card.css('background-color', '#fbc02d');
} else if (btn.hasClass('zoom-btn-tangram')) {
card.css('background-color', '#388e3c');
} else if (btn.hasClass('zoom-btn-report')) {
card.css('background-color', '#1976d2');
} else {
card.css('background-color', '#7b1fa2');
}
});
});
