2分钟教你实现环形/扇形菜单(基础版)

实现环形/扇形菜单可以为网站或应用程序增加一些交互性和视觉吸引力。下面是一个完整攻略，包含了如何使用 HTML、CSS 和 JavaScript 实现环形/扇形菜单的过程和两个示例说明。

实现环形/扇形菜单

步骤一：HTML 结构

首先，我们需要创建一个 HTML 结构来容纳菜单项。下面是一个示例：

<div class="menu">
  <div class="item">
    <a href="#">菜单项 1</a>
  </div>
  <div class="item">
    <a href="#">菜单项 2</a>
  </div>
  <div class="item">
    <a href="#">菜单项 3</a>
  </div>
  <div class="item">
    <a href="#">菜单项 4</a>
  </div>
  <div class="item">
    <a href="#">菜单项 5</a>
  </div>
</div>

上述代码中，我们创建了一个包含五个菜单项的菜单。每个菜单项都包含一个链接。

步骤二：CSS 样式

接下来，我们需要使用 CSS 样式来布局和样式化菜单项。下面是一个示例：

.menu {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.item:hover {
  background-color: #333;
}

上述代码中，我们将 .menu 元素的 position 属性设置为 relative，以使其成为相对定位元素。我们将 .item 元素的 position 属性设置为 absolute，以使其相对于 .menu 元素定位。我们使用 top 和 left 属性将菜单项居中。我们将菜单项的宽度和高度设置为 50px，并将其 border-radius 属性设置为 50%，以使其成为圆形。我们使用 background-color 属性设置菜单项的背景颜色，并使用 text-align 和 line-height 属性使文本垂直居中。我们使用 font-size 和 color 属性设置文本的字体大小和颜色。我们使用 cursor 属性将鼠标指针设置为手型，以表示菜单项是可点击的。我们使用 transition 属性为菜单项添加过渡效果。

步骤三：JavaScript 代码

最后，我们需要使用 JavaScript 代码来实现菜单项的环形/扇形布局。下面是一个示例：

var menu = document.querySelector('.menu');
var items = document.querySelectorAll('.item');
var angle = 0;
var step = 360 / items.length;

for (var i = 0; i < items.length; i++) {
  var item = items[i];
  angle += step;
  var x = Math.round(100 * Math.sin(angle * Math.PI / 180));
  var y = Math.round(100 * Math.cos(angle * Math.PI / 180));
  item.style.transform = 'translate(' + x + '%, ' + y + '%)';
}

上述代码中，我们首先获取 .menu 元素和 .item 元素。我们使用 angle 变量来存储每个菜单项的角度。我们使用 step 变量来计算每个菜单项之间的角度差。我们使用 for 循环遍历每个菜单项。在每次循环中，我们将 angle 变量增加 step 变量的值。我们使用 Math.sin 和 Math.cos 函数来计算每个菜单项的 x 和 y 坐标。我们使用 translate() 函数将菜单项移动到正确的位置。

示例

下面是两个示例，演示如何使用 HTML、CSS 和 JavaScript 实现环形/扇形菜单。

示例一：环形菜单

<div class="menu">
  <div class="item">
    <a href="#">菜单项 1</a>
  </div>
  <div class="item">
    <a href="#">菜单项 2</a>
  </div>
  <div class="item">
    <a href="#">菜单项 3</a>
  </div>
  <div class="item">
    <a href="#">菜单项 4</a>
  </div>
  <div class="item">
    <a href="#">菜单项 5</a>
  </div>
</div>

.menu {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.item:hover {
  background-color: #333;
}

var menu = document.querySelector('.menu');
var items = document.querySelectorAll('.item');
var angle = 0;
var step = 360 / items.length;

for (var i = 0; i < items.length; i++) {
  var item = items[i];
  angle += step;
  var x = Math.round(100 * Math.sin(angle * Math.PI / 180));
  var y = Math.round(100 * Math.cos(angle * Math.PI / 180));
  item.style.transform = 'translate(' + x + '%, ' + y + '%)';
}

上述代码中，我们创建了一个包含五个菜单项的环形菜单。每个菜单项都是圆形，并且在鼠标悬停时会变成黑色。我们使用 JavaScript 代码将菜单项布局成一个环形。

示例二：扇形菜单

<div class="menu">
  <div class="item">
    <a href="#">菜单项 1</a>
  </div>
  <div class="item">
    <a href="#">菜单项 2</a>
  </div>
  <div class="item">
    <a href="#">菜单项 3</a>
  </div>
  <div class="item">
    <a href="#">菜单项 4</a>
  </div>
  <div class="item">
    <a href="#">菜单项 5</a>
  </div>
</div>

.menu {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.item:hover {
  background-color: #333;
}

var menu = document.querySelector('.menu');
var items = document.querySelectorAll('.item');
var angle = 0;
var step = 90 / (items.length - 1);

for (var i = 0; i < items.length; i++) {
  var item = items[i];
  var x = Math.round(100 * Math.sin(angle * Math.PI / 180));
  var y = Math.round(100 * Math.cos(angle * Math.PI / 180));
  item.style.transform = 'translate(' + x + '%, ' + y + '%)';
  angle += step;
}

上述代码中，我们创建了一个包含五个菜单项的扇形菜单。每个菜单项都是圆形，并且在鼠标悬停时会变成黑色。我们使用 JavaScript 代码将菜单项布局成一个扇形。