jQuery circle menu navigation creating tiny circle after toggle close

Question

when I click on the main circle the surrounding 5 circles will get minimized completely( to 100% hide), but those are not minimizing completely. There is a small circle over the main circle after minimizing. How to completely minimize (hide) the tiny circle on top of the main circle after toggle close.

I have tried jQuery hide but it was hiding entire element,

Below is the jQuery code,

var nbOptions = 8;
var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
               .css({ transform: 'rotate('+now+'deg)' })
               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
        }, duration: 0
    });
}

// show / hide the options
function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
    for(var i=0; i<li.length; i++) {
        var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
        $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);

    }
}

$('.selector button').click(function(e) {
    toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.selector'); }, 100);

http://jsfiddle.net/adzFe/2574/

Answer 1

Looks like the problem is in your CSS .selector li input + label rule. You still have some padding and border width in this rule which is giving the circles some size. Change those 2 values to 0 and they should completely hide:

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 120%;
  width: 0;
  height: 0;

  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;

  overflow: hidden;
  cursor: pointer;

  border:0 solid #999; /* previously 1px */
  padding:0; /* previously 6px */
  background:#eee;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

Update: Since the padding and border are needed, you can adjust your ruleset to have these values while the menu circles have the open class and remove them when the class is not present

http://jsfiddle.net/avt0fvk4/

Answer 2

You do need to remove the border and padding inside .selector.open li input + label but you can toggle on and off with another class.

.open1 {
    padding: 6px;
    border:1px solid #999;
 }  

Add this JS:

function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    li.find("label").toggleClass("open1"); // NEW
    ...
}

Fiddle: http://jsfiddle.net/adzFe/2576/

Answer 3

I agree, the mini circle is caused by extra padding at wrong class, I have moved the padding to the selector.open. Now it is not showing any mini circle.

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 120%;
  width: 0;
  height: 0;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
   background:#eee;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label img {    
border-radius:50%;
}

.selector.open li input + label {
  width: 90px;
  height: 90px;
  margin-left: -40px;
  padding:6px;
   border:1px solid #999;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); 
}

.selector.open li input + label:hover {    
border:1px solid #fff;
padding:6px;
background:#fff;
}
.mainimage{
width:100%;
height:100%;
border-radius:50%;
}

Working code

http://jsfiddle.net/adzFe/2577/