Distribute around circle on click

by kthornbloom

HTML

<div class="circle-menu-wrap"> <a href="#" class="circle-item">1</a>
    <a href="#" class="circle-item">2</a>
    <a href="#" class="circle-item">3</a>
    <a href="#" class="circle-item">4</a>
    <div class="circle-menu-trigger">+</div>
</div>

<br>
    
<div class="circle-menu-wrap"> <a href="#" class="circle-item">1</a>
    <a href="#" class="circle-item">2</a>
    <a href="#" class="circle-item">3</a>
    <a href="#" class="circle-item">4</a>
    <a href="#" class="circle-item">5</a>
    <a href="#" class="circle-item">6</a>    
    <div class="circle-menu-trigger">+</div>
</div>
    
<br>
    
<div class="circle-menu-wrap"> <a href="#" class="circle-item">1</a>
    <a href="#" class="circle-item">2</a>
    <a href="#" class="circle-item">3</a>
    <a href="#" class="circle-item">4</a>
    <a href="#" class="circle-item">5</a>
    <a href="#" class="circle-item">6</a>
    <a href="#" class="circle-item">7</a>
    <a href="#" class="circle-item">8</a>
    <a href="#" class="circle-item">9</a>
    <a href="#" class="circle-item">10</a>    
    <div class="circle-menu-trigger">+</div>
</div>
<br>    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

CSS

body {
    font-family:sans-serif;
    background:#fff;
    height:100%;
}
.circle-menu-wrap {
    -webkit-filter:url('#goo');
    filter:url('#goo');
    position:relative;
    margin:15px;
    display:inline-block;
    width:0;
    height:0;
    transition:.5s cubic-bezier(0, 0, 0, 1);
}
a:link, a:visited {
    display:block;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:18px;
    text-align:center;
    text-decoration:none;
    background:DodgerBlue;
    color:#000;
    position:absolute;
    left:50%;
    top:50%;
    margin:-15px 0 0 -15px;
    transform:rotate(0deg) translate(0px) rotate(0deg) scale(.1);
    transition:1s cubic-bezier(0, 0, 0, 1.3), rotate;
}
.circle-menu-trigger {
    position:absolute;
    background:DodgerBlue;
    color:#000;
    line-height:30px;
    border-radius:18px;
    text-align:center;
    text-decoration:none;
    font-weight:bold;
    width:30px;
    height:30px;
    left:50%;
    top:50%;
    margin:-15px 0 0 -15px;
    transition:1s ease-out;
}
.circle-menu-trigger:hover {
    cursor:pointer;
    background:#58ADFF;
}
.rotate, .rotate:hover {
    transform: rotate(-45deg) scale(.7);    
    color: #000;
}

JavaScript

$('.circle-menu-trigger').click(function () {
    distributeCircle($(this).parent());
});

function distributeCircle(e) {
    // Is menu already open?
    if ($(e).find('.circle-menu-trigger').hasClass('rotate')) {
        
        // If so, put stuff back
        $('.circle-item', e).css({
            transform: 'rotate(0deg) translate(0px) rotate(0deg) scale(.1)'
        });

        $(e).find('.circle-menu-trigger').removeClass('rotate');
        setTimeout(function () {
            $(e).css({
                width: '0px',
                height: '0px'
            });
        }, 100);
    } else {
        var itemCount = $('.circle-item', e).length,
            itemAngle = 360 / itemCount,
            itemWidth = $('.circle-item').width(),

            // Adjust the number here to change the spacing of items
            spacingAdjust = (15 * itemCount);
        // Minimum circle size
        if (spacingAdjust < 80) {
            var spacingAdjust = 80
        }

        // Set size of container
        $(e).css({
            width: spacingAdjust,
            height: spacingAdjust,
            borderRadius: spacingAdjust
        });

        // Wait for container size (just for asthetics) 
        setTimeout(function () {
            // Rotate + to x
            $('.circle-menu-trigger', e).addClass('rotate');
            // Position each item around circle
            $('.circle-item', e).each(function (i) {
                var thisIndex = $(this).index(),
                    uniqueAngle = (thisIndex + 1) * itemAngle;
                $(this).delay(200*i).queue(function(hithere) {
                    $(this).css({
                    transform: 'rotate(-' + uniqueAngle + 'deg) translate(' + spacingAdjust / 2 + 'px) rotate(' + uniqueAngle + 'deg) scale(1)'
                    });
                    $( this ).dequeue();
                });
            });
            // Time for container size animation
        }, 300);
    }
}