Cara buat menu dropdown circle effect slide smooth di bootstrap

Assalamu'alaikum wr wb,
Kali ini saya akan share Cara buat menu dropdown circle effect slide smooth di bootstrap.
Berikut ini syntaxnya.
-------------------------------
<style type="text/css">
.menu {
  filter: url("#shadowed-goo");
}

.menu-item, .menu-open-button {
  background: #00bcd4;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  top: 20px;
  color: white;
  text-align: center;
  line-height: 100px;
  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.fa
{
  margin-top: 25%;
}

.menu {
  position: absolute;
  left: 50%;
  margin-left: -80px;
  padding-top: 20px;
  padding-left: 80px;
  width: 650px;
  height: 1000px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-item:hover {
  background: red;
  color: #00bcd4;
}
.menu-item:nth-child(3) {
  transition-duration: 180ms;
}
.menu-item:nth-child(4) {
  transition-duration: 180ms;
}
.menu-item:nth-child(5) {
  transition-duration: 180ms;
}
.menu-item:nth-child(6) {
  transition-duration: 180ms;
}
.menu-item:nth-child(7) {
  transition-duration: 180ms;
}
.menu-item:nth-child(8) {
  transition-duration: 180ms;
}
.menu-item:nth-child(9) {
  transition-duration: 180ms;
}
.menu-item:nth-child(10) {
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(1, 1) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
  transition-duration: 190ms;
  transform: translate3d(0, 85px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  transition-duration: 290ms;
  transform: translate3d(0, 170px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  transition-duration: 390ms;
  transform: translate3d(0, 255px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 490ms;
  transform: translate3d(0, 340px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 590ms;
  transform: translate3d(0, 425px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 690ms;
  transform: translate3d(0, 510px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 790ms;
  transform: translate3d(0, 595px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(10) {
  transition-duration: 890ms;
  transform: translate3d(0, 680px, 0);
}

</style>


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
  <label class="menu-open-button" text="" for="menu-open">
    <img src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAi2AAAAJDNlODU5MDMxLTQyYjAtNDQ4Ni05M2IyLTkzMWJiN2I3YzYyNg.jpg" style="border-radius: 50%;" height="80">
   <!--  <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span> -->
  </label>
 
  <a href="#" class="menu-item"> <i class="fa fa-file-text-o fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-user fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-envelope-o fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-users fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-diamond fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-file-text fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-gear fa-2x"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-sign-out fa-2x"></i> </a>
</nav>

<div class="wrapper">
  <div class="dot_wrapper main" text=""><div class="dot"></div></div>
  <a href="#" class="dot_wrapper" text=""><div class="dot"></div></a>
  <a href="#" class="dot_wrapper"><div class="dot"></div></a>
  <a href="#" class="dot_wrapper"><div class="dot"></div></a>
  <a href="#" class="dot_wrapper"><div class="dot"></div></a>
</div>

-------------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/