VLrwGp

index.html

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

script.js

var $menu         = $('.menu');
var $menuUl       = $('.menu ul');
var $menuTitle    = $('.menuTitle');
var count         = 0;

$menu.click(function(){
  
  count++;
  
  if (count%2 == 1) {
    
    var tl = new TimelineLite();
    
    tl.to($menu, 0.5, {css:{
                width: 750,
                background: "transparent",
                borderRadius: 0,
                borderTop: "1px solid #D8D8D8"
    }, ease:Expo.easeInOut})
    tl.to($menuTitle, 0.25, {x:0, y:-130, color:"#fff"});
    
    setTimeout(function(){
      $menuUl.fadeIn(250);
    }, 200);
    
  } else {
    
    $(this).css({borderRadius: "100%"})
  
    TweenMax.set($menu, {clearProps:"all"});
    TweenMax.set($menuTitle, {clearProps:"all"});
    
    $menuUl.hide();
  };
  
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>

style.css

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


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


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

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


.menu {
  width: 150px;
  height: 150px;
  display: block;
  position: relative;
  margin: 150px auto;
  background: $white;
  border-radius: 100%;
  border: 1px solid $white;
  cursor: pointer;
  & ul {
    padding: 0;
    width: 100%;
    display: none;
    position: relative;
    text-align: center;
    top: -120px;
    & 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;
      &:last-child {
        margin-right: 0;
      }&:hover {
        background: $white;
        & a {
          color: #000;
        }
      }
    }
  }
  
  .menuTitle {
    line-height: 150px;
    color: #000;
    text-transform: uppercase;
    font-size: 40px;
    width: 100%;
    text-align: center;
    letter-spacing: 8px;
    display: block;
    padding-left: 5px;
    font-family: Inconsolata;
    -webkit-user-select: none;
  }
}

VLrwGp.markdown

VLrwGp

A Pen by Mathieu Lavoie on CodePen.

License.