%main
  %ul.menu
    - %w(home gallery about blog contact).each do |item|
      %li.menu-item{class: ('active' if item == 'gallery')}
        %a{href: "#{item}.html"}= item

%footer
  %p
    This pen is a part of 
    %a{href: "https://codepen.io/collection/XMjJkR/", target: '_blank'} Magic Line
    collection by
    = succeed '.' do
      %a{href: "http://mobilemarkup.com", target: '_blank'} mobileMarkup
View Compiled
$bg: #17B794
$color: #22267B

.menu
  position: relative
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  
  box-shadow: 0 .5em 2em rgba(black, 0.5)
  background: black
  
  text-transform: uppercase
  text-align: center
  letter-spacing: .25em
  font-size: calc(1em + 1vh)
  
  padding: 0
  margin: 0
  list-style-type: none
  
  display: inline-block
  
  .menu-item
    position: relative
    z-index: 1  
  a
    display: block
    color: inherit
    text-decoration: none
    
    padding: .75em 4em .75em 4em
        
  li
    @for $i from 1 through 5
      $percent: ($i - 1) * 15%
      &:nth-child(#{$i})
        background: shade(#22267B, $percent)

  // hover, active
  .active, a:hover
  .magic-line, .menu-item.active a
    &:after
  &.has-magic-line
    .active a
      
.magic-line
  position: absolute
  z-index: 0
  top: 0
  left: 0
  right: 0
  height: 0
  pointer-events: none
  
  transition: transform .3s, background .3s
  
  backface-visibility: hidden
  transform-style: preserve-3d
  will-change: transform
  
  &:before, &:after
    content: ''
    position: absolute
    top: 0
    height: 100%
    background: inherit
    width: .5em
    box-shadow: 0 .5em 2em rgba(black, 0.5)
    
  &:before
    right: 100%
    border-radius: 3px 0 0 3px
  &:after
    left: 100%
    border-radius: 0 3px 3px 0
    
  
html, body
  height: 100%

body
  color: #fff
  font-family: 'Cairo', sans-serif
  line-height: 1.25
  
main
  background: radial-gradient(ellipse farthest-corner at center top, $bg, shade($bg, 60%))
  height: 100%
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.8)
  
footer
  background: shade($color, 60%)
  position: relative
  z-index: -1
  height: 200px
  p
    margin: 0
    position: fixed
    z-index: 10
    bottom: 100px
    font-size: 2em
    text-align: center
    width: 100%
    box-sizing: border-box
    padding: 0 2em
    transform: translateY(50%)
    text-shadow: 2px 2px 4px black
  a
    text-decoration: none
    color: $bg
View Compiled
class magicLine
  
  constructor: (@menu) ->
    
    return unless @menu
        
    @menu.classList.add 'has-magic-line'
    @line = document.createElement 'li'
    @line.classList.add 'magic-line'
    @menu.appendChild @line

    @update()
    window.addEventListener 'resize', @update()

  update: =>

    return unless el = @menu.querySelector '.active'
        
    @line.style.transform = "translateY( #{el.offsetTop||0}px )"
    @line.style.height = "#{el.offsetHeight||0}px"
    @line.style.backgroundColor = window.getComputedStyle(el).getPropertyValue('background-color')

# initialize
    
window.magicLine = new magicLine document.querySelector('.menu')

# click

for a in document.querySelectorAll('.menu-item a')
  a.addEventListener 'click', (e) ->
    e.preventDefault()
    document.querySelector('.menu-item.active')?.classList.remove 'active'
    this.parentNode.classList.add 'active'
    window.magicLine.update()
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Cairo

External JavaScript

This Pen doesn't use any external JavaScript resources.