<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="large-circle circle"></div>
  <div class="medium-circle circle">
    <i class="fa fa-picture-o" data-label="Gallery"></i>
    <i class="fa fa-user" data-label="About Me"></i>
    <i class="fa fa-envelope" data-label="Contact"></i>
  </div>
  <div class="small-circle circle">
    <i class="fa fa-home" data-label="Home"></i>
    <i class="fa fa-search" data-label="Search"></i>
  </div>
  <div class="close"><i class="fa fa-times"></i></div>
  <div class="hamburger"><i class="fa fa-bars"></i></div>

  <div class="label"></div>

@import url(https://fonts.googleapis.com/css?family=Muli);

body {
  background: #eee;
}

.hamburger, .close {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 160px;
  height: 160px;
  background: #404040;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 5px #555;
}
.hamburger i, .close i {
  position: absolute;
  bottom: 35px;
  right: 36px;
  color: #eee;
  font-size: 30px;
}
.close {
  background: #ccc;
  box-shadow: inset 0px 0px 15px #555;
  i {
    position: absolute;
    bottom: 40px;
    right: 43px;
    color: #eee;
    font-size: 22px;
  }
}

.small-circle {
  position: absolute;
  top: -300px;
  left: -300px;
  width: 300px;
  height: 300px;
  background: #754848;
  border-radius: 50%; 
  .fa-home{
    position: absolute;
    bottom: 32px;
    right: 89px;
    color: #eee;
    font-size: 30px;
  }
  .fa-search{
    position: absolute;
    bottom: 95px;
    right: 33px;
    color: #eee;
    font-size: 28px;
  }
}

.medium-circle {
  position: absolute;
  top: -460px;
  left: -460px;
  width: 460px;
  height: 460px;
  background: #404040;
  border-radius: 50%;
  .fa-picture-o{
    position: absolute;
    bottom: 175px;
    right: 30px;
    color: #eee;
    font-size: 28px;
  }
  .fa-user{
    position: absolute;
    bottom: 82px;
    right: 79px;
    color: #eee;
    font-size: 33px;
  }
  .fa-envelope{
    position: absolute;
    bottom: 29px;
    right: 168px;
    color: #eee;
    font-size: 28px;
  }
}

.large-circle {
  position: absolute;
  top: -475px;
  left: -475px;
  width: 475px;
  height: 475px;
  background: #eee;
  border-radius: 50%; 
  box-shadow: inset 0px 0px 2px #555;
}

.circle i {
  cursor: pointer;
}

.label {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  padding: 3px 9px;
  border: 1px solid #ccc;
  color: #404040;
  border-radius: 5px;
  font-size: 14px;
  font-family: 'Muli', sans-serif;
}

openMenu();
    setTimeout(function(){
      closeMenu();  
    }, 1500);

    $(".close").click(function(){
      closeMenu();  
    });

    $(".hamburger").click(function(){
      openMenu(); 
    });

    $("i").hover(function(){
      if($(this).attr('data-label') != undefined){
        var attrVal = $(this).attr('data-label');
        var offset = $(this).offset();

        $(".label").text(attrVal);

        TweenLite.set(".label", {top: offset.top, left: offset.left + 80});
        TweenLite.fromTo(".label", 0.25, {autoAlpha: 0, left: "+=20"}, {autoAlpha: 1, left: offset.left + 50})
      }
    }, function(){
      var offset = $(this).offset();
      TweenLite.to(".label", 0.25, {autoAlpha: 0, left: offset.left + 70});
    });

    function openMenu() {
      $($(".circle").get().reverse()).each(function (i) {
        var radius = $(this).width();
        TweenLite.to($(this), 0.3, {top: -radius/2, left: -radius/2, delay: 0.1*i})
      });
      TweenLite.to(".hamburger", 0.3, {top: -160, left: -160}); 
    }

    function closeMenu() {
      $(".circle").each(function (i) {
        var radius = $(this).width();
        TweenLite.to($(this), 0.4, {top: -radius, left: -radius, delay: 0.1*i})
      });
      TweenLite.to(".hamburger", 0.3, {top: -80, left: -80}); 
    }