Как сверстать меню в виде круга с сегментами сложной формы?

#javascript #html #jquery #css #вёрстка

Не являюсь профом в CSS и JS, но вот нужно решить такую задачу:


Интересует именно элемент слева. Ничего подобного в сниппетах не нашёл (может подобные
элементы,  как-то по определённому называются).
Должно работать так: при нажатии на сектор, он увеличивается в размерах (как под
номером 1), а справа, меняется информация.
Может где есть похожая реализация?
    

Ответы

Ответ 1

Пока первая часть

тренировался здесь



    




Вторая часть последняя со рабочими вкладками (клик вне закрывает все вкладки)



$("g.red").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(-40px,-30px)"
  });
  $(".blue,.green").removeAttr("style");
  $(".info1").show();
  $(".info2,.info3").hide();
});

$("g.blue").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(10px,-30px)"
  });
  $(".red,.green").removeAttr("style");
  $(".info2").show();
  $(".info1,.info3").hide();
});

$("g.green").on("click", function() {
  $(this).css({
    "transform": "scale(1.1)translate(10px,5px)"
  });
  $(".blue,.red").removeAttr("style");
  $(".info3").show();
  $(".info1,.info2").hide();
});

jQuery(function($) {
  $(document).mouseup(function(e) {
    var el = $("g");
    if (!el.is(e.target) &&
      el.has(e.target).length === 0) {
      el.removeAttr("style");
      $(".info").hide();

    }
  });
});
svg {
  width: 450px;
  transform: translateY(-40px);
}

.items {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.wrapper {
  display: flex;
}

.info1,
.info2,
.info3 {
  display: none;
  background: inherit;
}

  

    

  
  

    

      text1 text1 text1 text1 text1
    
    

      text2 text2 text2 text2 text2 text2
    
    

      text3 text3 text3 text3 text3 text3 text3
    
  







Так как я не умею писать js то я выполнил это таким образом

Результат готовый и если публика stackoverflow поможет сократить js то будет вообще супер