.container
    .menu(tabindex= '1')
        .list|
            |
            - for(var s = 1; s < 4; s++)
                span Menu #{s}
        .intro
            .btn
            h1 Off Canvas Menu <br> Pure CSS
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat urna sit amet volutpat luctus. Cras bibendum at massa vel elementum. Aenean hendrerit tellus consequat erat tempor scelerisque. Nunc mattis malesuada lectus. Maecenas vitae ullamcorper quam, non rutrum sem.
|
|
a.me(href='https://codepen.io/uzcho_/pens/popular/?grid_type=list' target='_blank')

body{
    font-family: 'Roboto';
    font-weight: 400;
    overflow: hidden
}

.container{
    min-width: 100%;
    min-height: 100%;
    @include _layout($bl, $rl, $n)
}

.menu{
    @include _dimension(40px);
    @include _layout($bl, $rl, $n)
}

.list, .intro{
    height: 100%;
    top: 0;
    z-index: -1;
    @include _flexbox($fx, column wrap, $c, $n, $c);
    transition: all .75s ease
}

.list{
    background: #26d07c;
    width: 120px;
    left: -120px;
    opacity: 0;
    span{
        @include _relative-box(#fff, 5px 0, 10px 0, 100px, $n);
        text-align: $c;
        border-radius: 4px
    }
}

.intro{
    width: 100%;
    padding: 0 8px;
    left: 0;
    text-align: $c
}

.btn{
    @include _solid-box(#000, $n, 10px, $n, $n, 10px, 40px);
    @include _layout($bl, $ab, $n);
    border-radius: 50%;
    @include _pseudo-complete($bfaf, $bl, #fff, $n, $n, $n, 10px, 20px, 2px){
        transition: all .75s ease
    }
    #{$bf}{
        top: 16px
    }
    #{$af}{
        bottom: 16px
    }
}

.menu:focus-within{
    .list{
        left: 0;
        opacity: 1
    }
    .intro{
        width: calc(100% - 120px);
        left: 120px
    }
    .btn{
        #{$bf}{
            transform: rotate(45deg) translate(2px, 2px) 
        }
        #{$af}{
            transform: rotate(-45deg) translate(2px, -2px)
        }
    }
}