I am not a professional in CSS and JS , but I need to solve this problem: circle menu

The element on the left is interested. I did not find anything like this in snippet (maybe similar elements, somehow for a certain reason are called).
It should work like this: when you click on a sector, it increases in size (as at number 1), and on the right, information changes.
Maybe where there is a similar implementation?

  • habr.com/post/126207 - abakan
  • 3
    damn complicated to implement stuff. I think on css net will not work, rather js + svg + math. Or maybe there are ready-made similar snippets in libraries like d3 - Artem Gorlachev
  • such css shadows are not exactly done - everything else is possible! - carcinogen75
  • @ carcinogen75 and if no shadows? - Master Wenom 2:44 pm
  • @abakan already watched it, but I could not draw such a broken sector. - Master Wenom

1 answer 1

Bye the first part

trained here

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 396"> <g class="red"> <path d="M 65.575894,283.98177 183.65971,154.16217 155.57143,72.378151 C 58.782665,95.809208 10.190442,191.8428 65.575894,283.98177 Z" style="fill:red;" /> <text xml:space="preserve" style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;" x="46.749924" y="291.71173" id="text4522" transform="scale(1.2137117,0.8239189)"><tspan id="tspan4520" x="46.749924" y="291.71173" style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">3</tspan></text> <text xml:space="preserve" style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;" x="100.70348" y="100.92748" id="text4534" transform="scale(0.79472758,1.2582928)"><tspan id="tspan4532" x="100.70348" y="100.92748" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan x="100.70348" y="115.30096" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4536">is simply dummy</tspan><tspan x="100.70348" y="129.67444" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4538"> text of the printing </tspan><tspan x="100.70348" y="144.04791" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4540">and typesetting</tspan><tspan x="100.70348" y="158.42139" style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4542"><tspan style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408" id="tspan4544"> industry</tspan>.</tspan></text> </g> <g class="green"> <path style="fill:green;" d="M 293.67227,256.41544 122.37935,218.97533 65.575894,283.98177 c 68.557676,72.00645 175.940786,66.19474 228.096376,-27.56633 z" /> <text xml:space="preserve" style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;" x="191.37885" y="345.22723" id="text4530" transform="scale(1.2137117,0.8239189)"><tspan id="tspan4528" x="191.37885" y="345.22723" style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">2</tspan></text> <text transform="scale(1.0701775,0.93442444)" id="text4568" y="272.83636" x="105.10145" style="font-size:22.53310585px;line-height:12.48924828px;font-family:Lato;fill:#ffffff;" xml:space="preserve"><tspan style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="272.83636" x="105.10145" id="tspan4556">Lorem Ipsum </tspan><tspan id="tspan4558" style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="288.57037" x="105.10145">is simply dummy</tspan><tspan id="tspan4560" style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="304.30438" x="105.10145"> text of the printing </tspan><tspan id="tspan4562" style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="320.03842" x="105.10145">and typesetting</tspan><tspan id="tspan4566" style="line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="335.77243" x="105.10145"><tspan id="tspan4564" style="font-size:11.89452267px;fill:#ffffff;stroke-width:0.84499151"> industry</tspan>.</tspan></text> </g> <g class="blue"> <path style="fill:blue;" d="m 155.57143,72.378151 53.2437,167.218489 84.85714,16.63865 C 321.85558,160.72205 263.06041,70.57337 155.57143,72.378151 Z" /> <text transform="scale(1.2137117,0.8239189)" id="text4526" y="143.28191" x="146.82492" style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;" xml:space="preserve"><tspan style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411" y="143.28191" x="146.82492" id="tspan4524">1</tspan></text> <text xml:space="preserve" style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;" x="251.44484" y="106.87792" id="text4582" transform="scale(0.79472758,1.2582928)"><tspan id="tspan4570" x="251.44484" y="106.87792" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan x="251.44484" y="121.2514" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4572">is simply dummy</tspan><tspan x="251.44484" y="135.62488" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4574"> text of the printing </tspan><tspan x="251.44484" y="149.99835" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4576">and typesetting</tspan><tspan x="251.44484" y="164.37183" style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4580"><tspan style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408" id="tspan4578"> industry</tspan>.</tspan></text> </g> </svg>

The second part is the last one with working tabs (click outside to close all tabs)

 $("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; } 
 <div class="wrapper"> <div class="items"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 420"> <g class="red"> <path d="M 65.575894,283.98177 183.65971,154.16217 155.57143,72.378151 C 58.782665,95.809208 10.190442,191.8428 65.575894,283.98177 Z" style="fill:red;" /> <text xml:space="preserve" style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;" x="46.749924" y="291.71173" id="text4522" transform="scale(1.2137117,0.8239189)"><tspan id="tspan4520" x="46.749924" y="291.71173" style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">3</tspan></text> <text xml:space="preserve" style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;" x="100.70348" y="100.92748" id="text4534" transform="scale(0.79472758,1.2582928)"><tspan id="tspan4532" x="100.70348" y="100.92748" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan x="100.70348" y="115.30096" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4536">is simply dummy</tspan><tspan x="100.70348" y="129.67444" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4538"> text of the printing </tspan><tspan x="100.70348" y="144.04791" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4540">and typesetting</tspan><tspan x="100.70348" y="158.42139" style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4542"><tspan style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408" id="tspan4544"> industry</tspan>.</tspan></text> </g> <g class="green"> <path style="fill:green;" d="M 293.67227,256.41544 122.37935,218.97533 65.575894,283.98177 c 68.557676,72.00645 175.940786,66.19474 228.096376,-27.56633 z" /> <text xml:space="preserve" style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;" x="191.37885" y="345.22723" id="text4530" transform="scale(1.2137117,0.8239189)"><tspan id="tspan4528" x="191.37885" y="345.22723" style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">2</tspan></text> <text transform="scale(1.0701775,0.93442444)" id="text4568" y="272.83636" x="105.10145" style="font-size:22.53310585px;line-height:12.48924828px;font-family:Lato;fill:#ffffff;" xml:space="preserve"><tspan style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="272.83636" x="105.10145" id="tspan4556">Lorem Ipsum </tspan><tspan id="tspan4558" style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="288.57037" x="105.10145">is simply dummy</tspan><tspan id="tspan4560" style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="304.30438" x="105.10145"> text of the printing </tspan><tspan id="tspan4562" style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="320.03842" x="105.10145">and typesetting</tspan><tspan id="tspan4566" style="line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151" y="335.77243" x="105.10145"><tspan id="tspan4564" style="font-size:11.89452267px;fill:#ffffff;stroke-width:0.84499151"> industry</tspan>.</tspan></text> </g> <g class="blue"> <path style="fill:blue;" d="m 155.57143,72.378151 53.2437,167.218489 84.85714,16.63865 C 321.85558,160.72205 263.06041,70.57337 155.57143,72.378151 Z" /> <text transform="scale(1.2137117,0.8239189)" id="text4526" y="143.28191" x="146.82492" style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;" xml:space="preserve"><tspan style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411" y="143.28191" x="146.82492" id="tspan4524">1</tspan></text> <text xml:space="preserve" style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;" x="251.44484" y="106.87792" id="text4582" transform="scale(0.79472758,1.2582928)"><tspan id="tspan4570" x="251.44484" y="106.87792" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan x="251.44484" y="121.2514" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4572">is simply dummy</tspan><tspan x="251.44484" y="135.62488" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4574"> text of the printing </tspan><tspan x="251.44484" y="149.99835" style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4576">and typesetting</tspan><tspan x="251.44484" y="164.37183" style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408" id="tspan4580"><tspan style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408" id="tspan4578"> industry</tspan>.</tspan></text> </g> </svg> </div> <div class="informers"> <div class="info info1"> text1 text1 text1 text1 text1 </div> <div class="info info2"> text2 text2 text2 text2 text2 text2 </div> <div class="info info3"> text3 text3 text3 text3 text3 text3 text3 </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Since I can't write js, then I did it this way.

The result is ready and if the stackoverflow public helps reduce js, it will be super

  • thank you cool - Master Wenom
  • it was not difficult for me - Nikita Fast