Guided by tradition
Driven by innovation
Enabled by collaboration
Guided by tradition
Driven by innovation
Enabled by collaboration
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)
.jpg)
.jpg)
