<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Material 2.0 Bottom Toolbar Motion Design & Interaction</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="sc-bottom-bar">
<a class="sc-menu-item">
<i class="fas fa-list"></i>
</a>
<a class="sc-menu-item sc-current">
<i class="fas fa-plus"></i>
</a>
<a class="sc-nav-indicator">
</a>
<a class="sc-menu-item">
<i class="fas fa-calendar-alt"></i>
</a>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
:root{
--primary-color:#0D6FFA;
--accent-color:#49CE95;
--danger-color:#EC3582;
--fore-color:rgba(0,0,0,0.65);
--main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12);
}
body{
background-color:#9664a5;
}
.sc-bottom-bar{
position:absolute;
display:flex;
padding: 16px 36px;
justify-content:space-between;
width:75%;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
height: 32px;
font-size:26px;
background-image:radial-gradient(circle at 36px 6px,transparent 36px, #ffffff 37px);
filter: drop-shadow(0px -1px 6px rgba(0, 0, 0, 0.08)) drop-shadow(0px -2px 12px rgba(0, 0, 0, 0.12));
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
transition: cubic-bezier(0.57, 0.23, 0.08, 0.96) .45s;
}
.sc-nav-indicator{
position:absolute;
width: 56px;
height: 56px;
bottom:28px;
margin:auto;
left:0;
background-color: #000000;
box-shadow: var(--main-cast-shadow);
border-radius:50%;
transition: cubic-bezier(0.45, 0.73, 0, 0.59) .3s;
}
.sc-menu-item{
color:var(--fore-color);
transition:ease-in-out .5s;
cursor: pointer;
}
.sc-current{
position:relative;
color:#ffffff;
z-index:3;
transform:translate3d(0px,-22px,0px);
}
var menu_bar = document.querySelector('.sc-bottom-bar');
var menu_item = document.querySelectorAll('.sc-menu-item');
var menu_indicator = document.querySelector('.sc-nav-indicator');
var menu_current_item = document.querySelector('.sc-current');
var menu_position;
menu_position = menu_current_item.offsetLeft - 16;
menu_indicator.style.left = menu_position + "px";
menu_bar.style.backgroundPosition = menu_position-8 + 'px';
menu_item.forEach(
function(select_menu_item){
select_menu_item.addEventListener('click', function(e){
e.preventDefault();
menu_position = this.offsetLeft - 16;
menu_indicator.style.left = menu_position + "px";
menu_bar.style.backgroundPosition = menu_position-8 + 'px';
[...select_menu_item.parentElement.children].forEach(
sibling => {
sibling.classList.remove('sc-current');
})
select_menu_item.classList.add('sc-current');
});
}
)