<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="MenuItemCover"> <div id="MenuItem">Menu</div> <div class="Submenu">SubMenu1</div> <div class="Submenu">SubMenu2</div> <div class="Submenu">SubMenu3</div> <div class="Submenu">SubMenu4</div> <div class="Submenu">SubMenu5</div> </div>

#MenuItemCover{ width: 200px; height: 200px; border-radius: 100%; } #MenuItem{ width: 80px; height: 80px; border-radius: 100%; background-color: #0c6457; box-shadow: 1px 1px 1px 1px #06322b; cursor: pointer; position: absolute; z-index: 1; margin-left: 60px; margin-top: 60px; color:white; font-weight: bold; display: inline-flex; vertical-align: middle; justify-content: center; align-items: center; } #MenuItem:hover{ box-shadow: 2px 2px 5px 2px #06322b; } .Submenu{ width:50px; height: 50px; border-radius:100%; background-color: #0e7466; position:absolute; display: inline-flex; vertical-align: middle; justify-content: center; align-items: center; margin-left: 75px; margin-top: 75px; color:white; font-weight: bold; font-size:9px; }

var widthOfRect=0; $(document).ready(function(){ $('#MenuItemCover').css('margin-left',$(window).width()-230); $('#MenuItemCover').css('margin-top',$(window).height()-230); }); $(document).on('click','#MenuItem',function(){ if (!$('.Submenu').hasClass('display')){ var margin=20; var result={X:0,Y:0}; var topMargin=($('#MenuItemCover').width()/2)-25; var leftMargin=($('#MenuItemCover').width()/2)-25; var angle=110; $('.Submenu').each(function(k,v){ $(this).addClass('display'); angle=angle+30; result.Y = parseInt( topMargin + 130 * Math.sin( angle * Math.PI / 180 ) ); result.X = parseInt( leftMargin + 130 * Math.cos( angle * Math.PI / 180 ) ); $(this).animate({ marginTop:result.Y, marginLeft:result.X }); }); } else{ $('.Submenu').each(function(k,v){ $(this).removeClass('display'); $(this).animate({ marginTop:75, marginLeft:75 }); }); } });