Cómo mostrar submenú en un menú de navegación circular al hacer clic en un elemento en jQuery

Question

Esta pregunta se deduce de una pregunta anterior que se puede encontrar aquí: Necesito desvanecer cada círculo 1 tras otro con jQuery

Básicamente, ahora, cuando se hace clic en el círculo de 'cambio climático y energía', necesito ocultar todos los otros círculos aparte del círculo haciendo clic y mostrar un subset u otros círculos que siguen la misma ruta que los círculos originales. Pero los nuevos círculos comienzan desde el siguiente punto desde el círculo hecho hecho.

He adjuntado una imagen de lo que debe mostrarse cuando haga clic en el círculo, que se puede ver aquí: http://cl.ly/eo95

Aquí está el código con el que lo intenté:

HTML:

<div class="circle_holder seventh">
                <div class="circle pie">
                    <a href="#"><span>climate change and energy</span></a>
                </div>
                <div class="inner_circles hidden">
                    <div class="circle_holder eighth">
                        <div class="circle pie">
                            <a href="#"><span>energy efficiency</span></a>
                        </div>
                    </div>
                    <div class="circle_holder first">
                        <div class="circle pie">
                            <a href="#"><span>renewable energy</span></a>
                        </div>
                    </div>
                    <div class="circle_holder second">
                        <div class="circle pie">
                            <a href="#"><span>carbon finance</span></a>
                        </div>
                    </div>
                    <div class="circle_holder third">
                        <div class="circle pie">
                            <a href="#"><span>climate adaptation</span></a>
                        </div>
                    </div
                    <div class="circle_holder fourth">
                        <div class="circle pie">
                            <a href="#"><span>ghg footprint assessment</span></a>
                        </div>
                    </div
                </div>
            </div>

JS:

if ($.browser.msie || $.browser.version < 9) {
    var circle = $('.circles .circle_holder > .circle');
    $(circle).animate({
        height: 168,
        width: 168,
        left: '0',
        top: '0'
    }, 1000);
    if (window.PIE) {
        $('.pie').each(function() {
            PIE.attach(this);
        });
    }
}

$('.circles .circle_holder > .circle').each(function(i){
    var time = 300 * (i + 1);
    setTimeout(function(){
        $('.circle').eq(i).addClass('open').animate({opacity: '1'}, i);
        $('.circle a span').animate({opacity: '1'}, 4000);
    }, time);
});

setTimeout(function() {
   $('.circle').addClass('circles_loaded');
}, 3700);

$('.circles > .circle_holder > .circle').click( function(){
    $('.inner_circles').removeClass('hidden', function() {
        console.log($('.inner_circles').parent().hide());
        $('.inner_circles').find().parent('.circle_holder').hide();

        $('.inner_circles .circle').each(function(i){
            var time = 300 * (i + 1);
            setTimeout(function(){
                $('.inner_circles .circle').eq(i).addClass('open').animate({opacity: '1'}, i);
                $('.inner_circles .circle a span').animate({opacity: '1'}, 4000);
            }, time);
        });
    });
});

Aquí hay un enlace a un jsfiddle que contiene todos los html/css & js: http://jsfiddle.net/thomasbritton/wv867/

Si alguien pudiera ayudarme con esto, lo agradecería mucho, ya que me he estado arrancando el cabello durante horas.

Estoy en Skype si a alguien le gustaría hablarlo si podría ayudar a las cosas.

Gracias

Answer 1

Intenté comunicarse con usted en Skype, pero no aceptó la invitación.
De todos modos: Haga clic en el cambio climático y la energía.

Demo jsbin

Perdón por arruinar tu CSS, completo JS, ... :)

Pero jugué esto podría ayudar. Eche un vistazo al CSS: no tiene que configurar manualmente los elementos alrededor del círculo BG. Solo trata de seguir el concepto y rehacer los colores que dejé. ¡Buena suerte!

var $outerC = $('.circle').not('.inner_circles > div > .circle');

var cX = 120; // center - distance from left
var cY = 130; // center - distance from top
var rad = 190; // SET .box DISTANCE (Radius from center);
var boxN = $outerC.length;

function circus(){
  $outerC.each(function(i,e){

      thisWc = $(e).outerWidth(true)/2;
      thisHc = $(e).outerHeight(true)/2;   
      var angle = (360/boxN)*i;
      var X = Math.round(cX+rad* Math.sin(angle*Math.PI/180))-2;
      var Y = Math.round(cY+rad*-Math.cos(angle*Math.PI/180))-2;  
      $(e).css({left:(X-thisWc), top:(Y-thisHc)});

  });
}
circus();

function fader(){
  $outerC.each(function(i,e){
          var time = 300*i;
          setTimeout(function(){
              $(e).addClass('open').animate({opacity: '1'}, time);
              $('.circle a span').animate({opacity: '1'}, 4000);
          }, time);
  });
}
fader();

$outerC.click(function(e){
    e.preventDefault();

    $outerC.fadeTo(300,0); // hide old ones
    $outerC = $(this).next('.hidden').find('.circle');   // set new
    boxN = $outerC.length;

    $('.hidden').show();
    $outerC.show();

    fader();
    circus(); 

}); 

Debe encontrar otra forma más programable de 'centrar' sus textos dentro de sus círculos.

Answer 2

Vale la pena echarle un vistazo: https://github.com/liri/moonmenujsNo es un menú de círculo completo, pero bastante agradable.