Our Programs
Our Programs
Our Programs
Our Programs
Our Programs
Our Programs
Our Programs
Our Programs
Our Programs
HOME
Investors
MEDIA
the bridge
FUNDRAISING
Meet the Fleet
About
The bridge
Ticker Tape by TradingView
/* 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)
