Inserting icons in the radial menu is possible?

A

Alex2020-12-24 19:36:43

Frontend

Alex, 2020-12-24 19:36:43

Hello!
There is a code: https://codepen.io/Alexzeus/pen/vYXWEez

I would like to insert it on Tilda. The problem is that instead of span elements of a burger, you need to insert an icon, after clicking on the icon, a circular menu opens, and in the center there is no longer an icon, but span elements in the form of "X"
How to limit the number of flying circles? (not 6, but 3)
How to insert text into flying circles?

Example: logisticgroupua.tilda.ws/proj1

Thank you.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Evgeny Golubev, 2020-12-24
@A_Min

And what is the actual problem?

<nav class="deoprevies">
  <input type="checkbox" href="#" class="expanddeoprevies" name="expanddeoprevies" id="expanddeoprevies" />
  <label class="labecaxu-pgecadin" for="expanddeoprevies"> 
    <img src="https://image.flaticon.com/icons/png/512/105/105428.png" width="35" height="35" alt="">  **Ну либо в сам класс пропиши** 
  </label>

  <a href="#" class="basede-bsitaybes persun"> Тупишь </a>
  <a href="#" class="basede-bsitaybes vtiposab"> <i class="fas fa fa-coffee"></i> </a>

  <a href="http://zornet.ru" class="basede-bsitaybes dekipaveg"> <i class="fa fa-camera-retro"></i> </a>
</nav>

Shove 2 svg, since I decided to do the first icon and then business

A

Alex, 2020-12-24
@A_Min

Yes, just pussy and stupid)
Thank you.
But with this option:
https://pmg.softwaretailoring.net/
Is it possible to insert it into Tilda? I saved wheelnav.js on GitHub, copied the link from there into the HTML block, it turned out such heresy, but it doesn’t work.

<html>
    <script type="text/javascript" src="https://github.com/alex-minenko/logisticgroup.git/wheelnav.js-1.7.1/raphael.min.js"></script>
    <script type="text/javascript" src="https://github.com/alex-minenko/logisticgroup.git/wheelnav.js-1.7.1/raphael.icons.min.js"></script>
    <script type="text/javascript" src="https://github.com/alex-minenko/logisticgroup.git/wheelnav.js-1.7.1/wheelnav.min.js"></script>
    
 <div id='piemenu' data-wheelnav
 data-wheelnav-slicepath='DonutSlice'
 data-wheelnav-marker data-wheelnav-markerpath='TriangleMarker'
 data-wheelnav-navangle='270'
 data-wheelnav-titleheight='45'
 data-wheelnav-cssmode 
 data-wheelnav-init>
  <div data-wheelnav-navitemicon='check' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemimg='http://pmg.softwaretailoring.net/img/pmg_favicon.png' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='checkbox' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='checked' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='star' onmouseup='alert("Place your logic here.");'></div>
</div>

<style>
  <div id='piemenu' data-wheelnav
 data-wheelnav-slicepath='DonutSlice'
 data-wheelnav-marker data-wheelnav-markerpath='TriangleMarker'
 data-wheelnav-navangle='270'
 data-wheelnav-titleheight='45'
 data-wheelnav-cssmode 
 data-wheelnav-init>
  <div data-wheelnav-navitemicon='check' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemimg='http://pmg.softwaretailoring.net/img/pmg_favicon.png' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='checkbox' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='checked' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='star' onmouseup='alert("Place your logic here.");'></div>
</div>
</style>

<script>
    var piemenu = new wheelnav('piemenu');
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.createWheel();
piemenu.setTooltips(['check','image','checkbox','checked','star']);
</script>



</html>