Simple Stripe.com Like Navigation

index.jade

nav.nav
    div.nav__bg-wrapper: div.nav__bg
    ul.nav__sections
        li.nav__section
            a.nav__label(href="#0") Products
            ul.nav__links.nav__links--large
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum

        li.nav__section
            a.nav__label(href="#0") Developers
            ul.nav__links.nav__links--small
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum

        li.nav__section
            a.nav__label(href="#0") Company
            ul.nav__links.nav__links--medium
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum
                li.nav__item: a(href="#0") Lorem ipsum

script.babel

const sections = document.querySelector('.nav__sections')
const links = document.querySelectorAll('.nav__section')
const bgWrapper = document.querySelector('.nav__bg-wrapper')
const bg = document.querySelector('.nav__bg')
const bgBCR = bg.getBoundingClientRect()

sections.addEventListener('mouseover', () => {
    setTimeout(() => bg.classList.add('is-animatable'))
})

sections.addEventListener('mouseleave', () => {
    bg.classList.remove('is-animatable')
})

;[].forEach.call(links, link => {

    link.addEventListener('mouseover', function () {
        bgWrapper.classList.add('is-visible')

        const links = this.querySelector('.nav__links')
        const linksBCR = links.getBoundingClientRect()

        const scaleX = linksBCR.width / bgBCR.width
        const scaleY = linksBCR.height / bgBCR.height

        bg.style.transform =
            `translate(${ linksBCR.left }px) scale(${ scaleX }, ${ scaleY })`
    })

    link.addEventListener('mouseleave', () => {
        bgWrapper.classList.remove('is-visible')
    })

})

simple-stripe-com-like-navigation.markdown

Simple Stripe.com Like Navigation

A Pen by Maciej Leszczyński on CodePen.

License.

style.sass

$blue: #405eff

@function em($px, $base: 16px)
    @return ($px / $base) * 1em

body
    font: 16px Open Sans, Arial, sans-serif
    background: $blue
    overflow-x: hidden

a
    text-decoration: none
    color: inherit

.nav
    display: flex
    justify-content: center
    position: relative

    &__bg-wrapper
        position: absolute
        left: 0
        top: 100%
        visibility: hidden
        opacity: 0
        transition: .3s
        will-change: opacity

        &.is-visible
            visibility: visible
            opacity: 1

    &__bg
        width: 300px
        height: 200px
        background: white
        // border-radius: 4px
        box-shadow: 0 3px 20px rgba(black, .4)
        transform-origin: left top
        will-change: transform

        &.is-animatable
            transition: .3s

    &__sections
        display: flex
        justify-content: center

    &__section
        position: relative

        &:hover
            .nav__label
                opacity: .6

            .nav__links
                visibility: visible
                opacity: 1

    &__label
        display: inline-block
        padding: em(30px) em(25px)
        color: white
        transition: .3s

    &__links
        position: absolute
        top: 100%
        left: 0
        padding: em(30px)
        visibility: hidden
        opacity: 0
        transition: .3s

        &--large
            width: em(400px)
        &--medium
            width: em(300px)
        &--small
            width: em(200px)

    &__item
        color: #666
        
        &:not(:last-of-type)
            margin-bottom: em(10px)