Cara buat menu dropdown circle bouncing effect di bootstrap

Assalamu'alaikum wr wb
Kali ini saya akan share bagaimana Cara buat menu dropdown circle bouncing effect di bootstrap.
Berikut ini syntaxnya.
--------------------------
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<style type="text/css">
.wrapper
{
padding: 100px;
background: #fff;
filter: contrast(20);
height: 900px;
}

.dot_wrapper
{
position: absolute;
left: 100px;
}

.dot_wrapper.main
{
z-index: 5;
cursor: pointer;
}

.dot_wrapper .text
{
display: block;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
background: #333;
z-index: 6;
}

.dot
{
display: inline-block;
height: 55px;
width: 55px;
border-radius: 100%;
background: blue;
z-index: 1;
transition: all .1s;
}
.dot:hover
{
width: 55px;
height: 55px;
}


.text
{
position: absolute;
color: #fff;
font-size: 30px;
text-align: center;
padding: 4px;
pointer-events: none;
z-index: 2;
}

.text_0
{
z-index: 6;
}
</style>



<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>


<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>


<script type="text/javascript">
var toggle = false;
var easing = "easeOutElastic";
var easing2 = "easeInElastic";
var animation_type = {duration : 800, easing: easing, queue: false}
var animation_type2 = {duration : 800, easing: easing2, queue: false}
var initial_dot_left = $('.dot_wrapper').css('top');

$('.dot_wrapper').each(function(i, elem){
 var text = $(elem).attr('text');
 if(text != undefined){
   $(elem).after("<div class='text text_"+i+"'>"+text+"</div>");
 }
});

$('.dot_wrapper.main').click(function(){
 if(toggle == true){
   $('.text').animate({"zoom": "0", "padding": "4px"}, animation_type2);
   $('.dot_wrapper').animate({"top": initial_dot_left}, animation_type2);
   toggle = false;
 }else{
   $('.dot_wrapper').each(function(i, elem){
     $('.text').animate({"zoom": "0", "padding": "4px"}, animation_type);
     $(elem).animate({"top": "+="+(i*70)}, animation_type);
   });
   toggle = true;
 }
});
</script>
--------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id/