如何在网站中创建径向拨号菜单？

Question

我正在尝试创建一个径向拨号式菜单，类似于这里的图片(突出显示的顶部部分应该处于悬停状态)：

​

​

谷歌的径向菜单或径向拨号菜单没有任何类似的结果。

我目前正在使用Elementor pro与WordPress。因此，如果需要的话，我也可以添加自定义HTML/CSS/JavaScript。

我正在考虑创建3-4个按钮，然后设法将它们转换成半圆，然后将它们放在一起。但是，如果添加/删除菜单项，则会产生大量手动调整大小的工作。此外，这将是一个噩梦，使网站响应。

Answer 1

您可以使用SVG作为您的径向按钮，使用一些js来处理onclick。

我从adobe插画师创建了这个svg代码，但是如果您没有adobe插画师，您可能可以找到在线的svg代码生成器。

参见下面的示例，其中css在PATHs上使用ids .您可以使用类和其他html属性来获得所需的结果.

​

PATH {
  fill: gray;
  stroke: #000;
  stroke-miterlimit: 10;
}

PATH:hover {
  cursor: pointer;
}

PATH#option_a:hover {
  fill: red;
}

PATH#option_b:hover {
  fill: green;
}

PATH#option_c:hover {
  fill: blue;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path id="option_a" d="M600.5,104.1c-276.1,0-500,223.9-500,500h100c0-220.9,179.1-400,400-400s400,179.1,400,400h100c0-276.1-223.9-500-500-500Z"/>
  <path id="option_b" d="M600.5,1004.1v100c276.1,0,500-223.9,500-500h-100c0,220.9-179.1,400-400,400Z"/>
  <path id="option_c" d="M200.5,604.1H100.5c0,276.1,223.9,500,500,500v-100c-220.9,0-400-179.1-400-400Z"/>
</svg>

​

回答你的意见，是的，肯定有这么多事情是可能的SVG。虽然我不是胡说八道，但有作为工具，SVG的设计就容易多了！

因此，我在原来的SVG代码中添加了箭头(使用)，然后创建了包含箭头的新SVG文件代码。从这个新的SVG代码中，我从我的d s中获取path属性，并将它们作为data-d属性添加到我的原始SVG paths中.

然后使用一个小jQuery，在path悬停时，我用path属性切换当前的d属性.

​

// on ready
$(function() {

  // on any segment mouse enter path
  $('.segment').on('mouseenter', function(e) {

    // temporally store hover-state data-d attribute coordinates
    let d = $(this).attr('data-d');

    // override data-d attribute value with original d attribute coordinates
    $(this).attr('data-d', $(this).attr('d'));

    // set d attribute with temporally stored hover-state coordinates
    $(this).attr('d', d);

  // on any segment mouse leave path
  }).on('mouseleave', function(e) {

    // temporally store original-state data-d attribute coordinates
    let d = $(this).attr('data-d');

    // override data-d attribute value with hover-state d attribute coordinates
    $(this).attr('data-d', $(this).attr('d'));

    // set d attribute with temporally stored original-state coordinates
    $(this).attr('d', d);

  });

});

SVG {
  display: block;
  width: 300px;
  margin: 0 auto;
}

PATH {
  fill: gray;
  stroke: #000;
  stroke-miterlimit: 10;
}

PATH:hover {
  cursor: crosshair;
}

PATH#segment_r:hover {
  fill: red;
}

PATH#segment_g:hover {
  fill: green;
}

PATH#segment_b:hover {
  fill: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path 
    class="segment"
    id="segment_r" 
    d="M600.5,104.1c-276.1,0-500,223.9-500,500h100c0-220.9,179.1-400,400-400s400,179.1,400,400h100c0-276.1-223.9-500-500-500Z"
    data-d="M630.4,105l-29.9-29.9L570.6,105c-262.2,15.5-470.1,233-470.1,499.1h100c0-220.9,179.1-400,400-400
    s400,179.1,400,400h100C1100.5,338,892.6,120.4,630.4,105z"
  />
  <path 
    class="segment"
    id="segment_g"
    d="M600.5,1004.1v100c276.1,0,500-223.9,500-500h-100c0,220.9-179.1,400-400,400Z"
    data-d="M974.6,935.9c78.4-88.3,125.9-204.5,125.9-331.8h-100c0,220.9-179.1,400-400,400v100
    c127.3,0,243.5-47.6,331.8-125.9h42.3V935.9z"
  />
  <path 
    class="segment"
    id="segment_b" 
    d="M200.5,604.1H100.5c0,276.1,223.9,500,500,500v-100c-220.9,0-400-179.1-400-400Z"
    data-d="M600.5,1004.1c-220.9,0-400-179.1-400-400h-100c0,127.3,47.6,243.5,125.9,331.8v42.3h42.3
    c88.3,78.4,204.5,125.9,331.8,125.9V1004.1z"
  />
</svg>

​

​

这是小提琴版..。https://jsfiddle.net/joshmoto/f9wg57u1/

我喜欢SVG代码。有这么多的可能性。

我的例子可能有点重(因此使用JS)，我相信有人可以用纯SVG和CSS重新创建这个示例。

但是在创建SVG时，从视觉设计的角度来看，让事情变得简单多了。

更新:我已经将path悬停状态光标更改为crosshair，这样您就可以看到在mouseleave事件之前的悬停区域中也包含了段箭头。