.menuContainer  
  
  span.menuTitle menu
  
  .menu
    ul
      li 
        a(href="#") shows
      li 
        a(href="#") media
      li 
        a(href="#") about
      li 
        a(href="#") merch

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);


$white: #D8D8D8;
$cubic: cubic-bezier(.55,0,.1,1);


body {
  background: #111;
  color: $white;
}

* {
  & li {
    list-style: none;
  }
  & a {
    text-decoration: none;
    color: $white
  }
}


.menuContainer {
  display: block;
  position: relative;
  width: 750px;
  margin: 0 auto;
}

.menu {
  width: 150px;
  height: 150px;
  display: block;
  position: relative;
  margin: 0px auto;
  background: $white;
  border-radius: 100%;
  border: 1px solid $white;
  cursor: pointer;
  z-index: 10;
  & ul {
    padding: 0;
    width: 100%;
    display: none;
    position: relative;
    text-align: center;
    top: 35px;
    & li {
      display: inline-block;
      position: relative;
      font-family: Inconsolata;
      font-size: 25px;
      margin-right: 25px;
      box-sizing: border-box;
      width: 125px;
      letter-spacing: 3px;
      text-align: center;
      line-height: 50px;
      &:active{
        text-transform: uppercase;
      }
      &:last-child {
        margin-right: 0;
      }&:hover {
        background: $white;
        & a {
          color: #000;
        }
      }
    }
  }
}
  
.menuTitle {
  line-height: 150px;
  width: 150px;
  color: #000;
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
  letter-spacing: 8px;
  display: block;
  position: relative;
  margin: 0 auto;
  top: 150px;
  z-index: 11;
  padding-left: 10px;
  font-family: Inconsolata;
  cursor: pointer;
  -webkit-user-select: none;
}

var $menu         = $('.menu');
var $wholeMenu    = $('.menu, .menuTitle');
var $menuUl       = $('.menu ul');
var $menuTitle    = $('.menuTitle');
var $menuContainer= $('.menuContainer');
var count         = 0;
var click         = true;

$wholeMenu.click(function(){

  if (click) {
    click = false;
    $menuTitle.css({'z-index': 9});
    
    var tl = new TimelineLite();
    
    tl.to($menu, 0.4, {css:{
                width: 750,
                background: "#000",
                borderRadius: 0,
                borderTop: "1px solid #D8D8D8"
    }, ease:Expo.easeInOut});
    tl.to($menuTitle, 0.25, {x:0, y:-110, color:"#fff"});
    
    setTimeout(function(){
      $menuUl.fadeIn();
    }, 250);
    
  } else {
    click = true;
    $menuTitle.css({'z-index': 11});
    $(this).css({borderRadius: "100%"})
  
    var tl = new TimelineLite();
    
    tl.to($menu, 0.25, {css:{
                width: 150,
                background: "#FFF",
                borderRadius: "100%",
                borderTop: "1px solid #D8D8D8"
    }, ease:Expo.easeInOut})
    tl.to($menuTitle, 0.25, {x:0, y:0, color:"#000"});
    
    $menuUl.hide();
  };

  
})