.content
  .container
    h1 Do you want to know more?
  .menu
    .container
      .links
        a Home
        a Products
        a Tutorials
        a Company
    .button
      i.fa.fa-bars
      i.fa.fa-times
    
View Compiled
@import compass

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800)

=clip-path($clip)
  -webkit-clip-path: $clip
  -moz-clip-path: $clip
  -ms-clip-path: $clip
  clip-path: $clip


h1,h2,p,a
  font-family: 'Open Sans', sans-serif
  font-weight: 300

$color-main:        #D35400   
$color-snd:         #666

.content
  position: relative
  top: 0
  background-image: url(https://ununsplash.imgix.net/33/U6XzvTb5RmuqrfNkQI0l_IMG_1861.jpg)
  min-height:       100vh
  background-position: 50% 50%
  background-size: cover
  overflow: hidden
  
  
.content > .container
  position: absolute
  top: 50%
  left: 50%
  +transform(translateX(-50%) translateY(-50%))
  
.container
  width:            80vw
  margin:           0 auto
  position:         relative
  
.container > h1
  font-size: 40px
  text-align: center
  color: white
.container > p
  
  
.menu
  position: absolute
  width: 100vw
  height: 100vh
  top: 0
  left: 0
  background-color: $color-main
  +clip-path(circle(30px at 50% 80%))
  +transition(1s)
  overflow: hidden
    
.menu > .button
  position: absolute 
  top: 80%
  left: 50%
  margin-left: -15px
  text-align: center
  margin-top: -10px
  font-size: 20px
  height: 30px
  width: 30px
  line-height: 30px
  +transition(300ms)
  &:hover
    cursor: pointer
    color: $color-main
    
.menu--active
  +clip-path(circle(100% at center))
  +transform(none)
  .button
    top: 90%
  .links
    display: block
    
.menu .fa-times
  display: none
.menu--active .fa-times
  display: block
.menu--active .fa-bars
  display: none
  
.links
  text-align: center
  position: absolute
  top: 50vh
  width: 100%
  line-height: 30px
  margin-top: -15px
  display: none
  a
    margin: 20px
    color: white
    font-size: 20px
    cursor: pointer
    &:hover
      color: #FDE3A7 

i
  color: white
View Compiled
$('.button, a').click ->
  $('.menu').toggleClass 'menu--active'
View Compiled
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js