Come mostrare il sottomenu in un menu di navigazione circolare su clic di un elemento in jQuery

Question

Questa domanda segue da una domanda precedente che può essere trovata qui: È necessario svanire in ogni cerchio 1 dopo l'altro con jQuery

Fondamentalmente ora quando si fa clic sul cerchio "Climate Change and Energy", devo nascondere tutti gli altri cerchi a parte il cerchio cliccato e mostrare un sottoset o altri cerchi che seguono lo stesso percorso dei cerchi originali. Ma i nuovi cerchi iniziano dal punto successivo in poi dal cerchio cliccato.

Ho allegato un'immagine di ciò che deve essere mostrato quando si fa clic sul cerchio, che può essere visto qui: http://cl.ly/eo95

Ecco il codice con cui l'ho tentato:

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);
        });
    });
});

Ecco un link a un JSFIDLE contenente tutti gli html/css e js: http://jsfiddle.net/thomasbritton/wv867/

Se qualcuno potesse aiutarmi con questo, lo apprezzerei molto perché mi sono strappato i capelli per ore.

Sono su Skype se qualcuno vorrebbe parlarne se potesse aiutare le cose.

Grazie

Answer 1

Ho provato a contattarti su Skype ma non hai accettato l'invito.
Comunque: Fai clic su cambiamenti climatici ed energia.

Demo jsbin

Scusa per aver rovinato il tuo CSS, completa JS, ... :)

Ma ho pensato che questo potesse aiutare. Dai un'occhiata al CSS: non è necessario impostare manualmente gli elementi intorno al cerchio BG. Prova solo a seguire il concetto e rifare i colori che ho lasciato. Buona fortuna!

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(); 

}); 

Dovresti trovare un altro modo più programmabile per "centrare" i tuoi testi all'interno dei tuoi cerchi.

Answer 2

vale la pena dare un'occhiata a: https://github.com/liri/moonmenujsNon è un menu a cerchio completo, ma piuttosto carino.