Comment afficher le sous-menu dans un menu de navigation circulaire en cliquant sur un élément dans jQuery

Question

Cette question fait suite à une question précédente qui peut être trouvée ici: Besoin de fondre dans chaque cercle 1 après l'autre avec jQuery

En gros, maintenant, lorsque vous cliquez sur le cercle "Changement climatique et énergie", je dois masquer tous les autres cercles en dehors du cercle cliqué et afficher un sous-ensemble ou d'autres cercles qui suivent le même chemin que les cercles d'origine. Mais les nouveaux cercles commencent à partir du point suivant à partir du cercle sur lequel vous avez cliqué.

J'ai joint une photo de ce qui doit être affiché lorsque vous cliquez sur le cercle, que vous pouvez voir ici: http : //cl.ly/EO95

Voici le code avec lequel j'ai essayé:

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

Voici un lien vers un jsFiddle contenant tous les HTML / CSS & JS: http:// jsfiddle. net / thomasbritton / wV867 /

Si quelqu'un pouvait m'aider avec cela, je l'apprécierais beaucoup car je m'arrache les cheveux depuis des heures.

Je suis sur skype si quelqu'un souhaite en parler si cela peut aider les choses.

Merci

Answer 1

J'ai essayé de vous joindre sur skype, mais vous n'avez pas accepté l'invitation.
Quoi qu'il en soit: cliquez sur le changement climatique et l'énergie .

DEMO jsBin

Désolé d'avoir ruiné votre CSS, complétez JS, ... :)

mais j'ai pensé que cela pouvait aider.Jetez un œil au CSS: vous n'avez pas à configurer manuellement les éléments autour du cercle bg.Essayez juste de suivre le concept et de refaire les couleurs que j'ai laissées.Bonne chance!

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

}); 

Vous devriez trouver un autre moyen plus programmable de "centrer" vos textes dans vos cercles.

Answer 2

cela vaut la peine de jeter un œil à: https://github.com/liri/moonMenuJS ce n'est pas un menu en cercle complet, mais plutôt sympa.