/* source article https://css-tricks.com/creating-an-animated-menu-indicator-with-css-selectors/ */
$nav_items:4;
$nav_items_width:(100/$nav_items)*1%;
body {
background:aliceblue;
}
.nav_wrap {
padding:20px;
&:hover {
.nav_item:last-child {
&:before,&:after {
opacity:1;
}
}
}
}
.nav_list {
position: relative;
display:flex;
align-items:center;
background:lightblue;
border-radius: 6px;
}
.nav_item {
flex:0 0 auto;
line-height: 50px;
width:$nav_items_width;
text-align: center;
&.active_mod {
.nav_link {
color:white;
}
}
&:last-child {
&:before,&:after {
content:'';
position: absolute;
z-index: 0;
transition:left .6s ease;
opacity:.75;
}
&:before {
top: 0;
left: 0;
width: $nav_items_width;
height: 6px;
background: darksalmon;
border-radius: 6px;
}
&:after {
border:10px solid transparent;
border-top:10px solid darksalmon;
top: 0;
left:50%;
margin-left:-10px;
}
}
}
.nav_link {
position: relative;
z-index: 5;
display: block;
padding: 10px;
border-radius: 4px;
color:crimson;
text-decoration: none;
&:hover {
text-decoration: none;
color:white;
}
}
@for $i from 1 through $nav_items {
.nav_item:nth-child(#{$i}).active_mod ~ .nav_item:last-child:before {
left:($nav_items_width*$i) - $nav_items_width;
}
.nav_item:nth-child(#{$i}).active_mod ~ .nav_item:last-child:after {
left:($nav_items_width*$i + $nav_items_width/2) - $nav_items_width;
}
}
.nav_item:last-child.active_mod:before {
left:(100% - $nav_items_width)
}
.nav_item:last-child.active_mod:after {
left:(100% - $nav_items_width)
}
@for $i from 1 through $nav_items {
.nav_item:nth-child(#{$i}):hover ~ .nav_item:last-child:before {
left:($nav_items_width*$i) - $nav_items_width !important;
}
.nav_item:nth-child(#{$i}):hover ~ .nav_item:last-child:after {
left:($nav_items_width*$i + $nav_items_width/2 ) - $nav_items_width !important;
}
}
.nav_item:last-child:hover:before {
left:(100% - $nav_items_width) !important;
}
.nav_item:last-child:hover:after {
left:(100% - $nav_items_width + $nav_items_width/2) !important;
}
.svg)
