@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700); *, *::before, *::after { box-sizing: border-box; } body { background: url('https://24.media.tumblr.com/a4eb7b32205d366bbea47042a04e10a9/tumblr_n5e0d0qDIW1st5lhmo1_1280.jpg'); background-size: cover; font-family: 'Open Sans', Helvetica, Arial, sans-serif; } %transition { transition: 250ms all; } .menu-opener { background: black; cursor: pointer; height: 4rem; margin: 1rem; position: absolute; user-select: none; width: 4rem; @extend %transition; &:hover, &.active { background: tomato; @extend %transition; } } .menu-opener-inner { background: white; height: .5rem; margin-left: .75rem; margin-top: 1.75rem; width: 2.5rem; @extend %transition; &::before, &::after { background: white; content: ''; display: block; height: .5rem; width: 2.5rem; @extend %transition; } &::before { transform: translateY(-.75rem); } &::after { transform: translateY(.25rem); } &.active { background: transparent; &::before { transform: translateY(0rem) rotate(-45deg); } &::after { transform: translateY(-.5rem) translateX(-0rem) rotate(45deg) } } } .menu { background: tomato; color: transparent; height: 4rem; margin: 1rem; position: absolute; top: 0; user-select: none; width: 0rem; z-index: -1; @extend %transition; &.active { width: calc(100% - 2rem); @extend %transition; & .menu-link { color: white; } } } .menu-inner { display: flex; flex-direction: row; height: 100%; list-style-type: none; margin: 0; margin-left: 4rem; padding: 0; } .menu-link { color: transparent; display: flex; flex: 1 1 auto; font-size: 2rem; font-weight: 100; height: 100%; text-align: center; text-decoration: none; li { margin: auto; } }