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

Home Forums Support Navigation Animation – line to drop down and exit screen

  • This topic has 3 replies, 2 voices, and was last updated 5 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1139254
    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?

    #1139687
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1148045
    Susan

    Perfection! Many thanks.

    #1148407
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.