Archived topic
Navigation Animation - line to drop down and exit screen
3 replies · Started by Susan on January 21, 2020
Viewing posts 1–4 of 4
I am in love with the navigation menu on the Salted Ink site. I am particularly interested in the way the line goes down to take a sharp right angle and exit stage right. Also the way the hover color drops below the content is very cool. Is there a way to do this with CSS?
Hi there,
You might be able to use their exact same CSS:
.main-navigation li:after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 1px solid #A27D50;
border-bottom: 1px solid #A27D50;
position: absolute;
top: 60%;
left: 50%;
opacity: 0;
-webkit-transition: height 1s 0.5s ease-in-out, width 0.5s ease-out, opacity 3s;
transition: height 1s 0.5s ease-in-out, width 0.5s ease-out, opacity 3s;
z-index: 99;
}
.main-navigation li:hover:after,
.main-navigation li.sfHover:after {
height: 15px;
width: 100vw;
-webkit-transition: height 0.5s ease-in-out, width 1s 0.5s ease-out;
transition: height 0.5s ease-in-out, width 1s 0.5s ease-out;
opacity: 1;
}Not 100%, but it looks like it should work :)
Perfection! Many thanks.
You're welcome :)
This archived topic is closed to new replies.
