Как показать подменю в круговом навигационном меню при нажатии элемента в jQuery - PullRequest
Новая
       45

Как показать подменю в круговом навигационном меню при нажатии элемента в jQuery

1 голос
/ 21 февраля 2012

Этот вопрос следует из предыдущего вопроса, который можно найти здесь: Необходимо постепенно исчезать в каждом круге 1 за другим с помощью jQuery

В основном сейчас, когда 'Изменение климата и энергия'щелчок по кругу, мне нужно скрыть все остальные круги кроме выделенного круга и показать подмножество или другие круги, которые следуют тому же пути, что и исходные круги.Но новые круги начинаются со следующей точки, начиная с нажатой окружности.

Я приложил изображение того, что нужно показать при нажатии на окружность, которое можно увидеть здесь: http://cl.ly/EO95

Вот код, с которым я пытался это сделать:

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

Вот ссылка на jsFiddle, содержащуювсе HTML / CSS и JS: http://jsfiddle.net/thomasbritton/wV867/

Если бы кто-нибудь мог мне помочь с этим, я был бы очень признателен, так как я рвал на себе волосы в течение нескольких часов.

IЯ нахожусь в скайпе, если кто-то хотел бы обсудить это, если это могло бы помочь вещам.

Спасибо

Ответы [ 2 ]

1 голос
/ 06 марта 2014

стоит взглянуть на: https://github.com/liri/moonMenuJS это не полный круг меню, но довольно приятно.

1 голос
/ 21 февраля 2012

Пытался связаться с вами по скайпу, но вы не приняли приглашение.
В любом случае: нажмите на изменение климата и энергии .

DEMO jsBin

Извините за разрушение вашего CSS, завершите JS, ...:)

, но я подумал, что это может помочь.Посмотрите на CSS: вам не нужно вручную настраивать элементы вокруг круга bg.Просто попробуйте следовать концепции и переделать цвета, которые я оставил.Удачи! 

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

});

Вы должны найти другой, более программируемый способ «центрировать» свои тексты внутри своих кругов.

...