[Resolved] Navigation Animation – line to drop down and exit screen

[Susan]

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?

[Tom]

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 🙂

[Susan]

Perfection! Many thanks.

[Tom]

You’re welcome 🙂

[Author]

Posts