HTML
<div id="nav" data-current-index="0">
<div class="nav-dot" data-index="0"></div>
<div class="nav-dot" data-index="1"></div>
<div class="nav-dot" data-index="2"></div>
<div class="nav-dot" data-index="3"></div>
</div>
SCSS
%select {
width: 40px; height: 40px;
margin: -20px;
background: linear-gradient(#5C6BC0, #9FA8DA);
&:after {
opacity: 1;
}
}
* {
tap-highlight-color: rgba(0, 0, 0, 0);
touch-callout: none;
user-select: none;
}
body {
background: #E8EAF6;
}
#nav {
position: absolute;
top: 50%;
left: 0; right: 0;
}
.nav-dot {
position: absolute;
left: 50%;
box-sizing: border-box;
margin: -16px;
border: solid #1A237E 6px;
border-radius: 50%;
width: 32px; height: 32px;
background: #fff;
box-shadow: 0 8px 0 rgba(0, 0, 0, .25);
cursor: pointer;
transition: all .2s ease-in-out;
&:after {
display: block;
position: absolute;
top: 50%; left: 50%;
margin: -13px -10px;
border-radius: 10px;
width: 20px; height: 18px;
content: "";
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
opacity: 0;
transition: all .2s ease-in-out;
}
&:nth-child(1) {
transform: translateX(-90px);
}
&:nth-child(2) {
transform: translateX(-30px);
}
&:nth-child(3) {
transform: translateX(30px);
}
&:nth-child(4) {
transform: translateX(90px);
}
@for $i from 0 through 3 {
[data-current-index="#{$i}"] &:nth-child(#{$i + 1}) {
@extend %select;
}
}
}
JavaScript
document.getElementById("nav").addEventListener("click", function(evt) {
let index = evt.target.dataset.index;
if (index) {
this.dataset.currentIndex = index;
}
}, false);