当用户点击/点击触发按钮时，会弹出一个令人惊叹且用户友好的放射状菜单。灵感来自材料设计，使用HTML/CSS/CS3/jQuery构建。您可以自定义菜单的位置，使其与网站的设计和布局完美匹配。

它可以用于各种目的，例如在社交媒体平台上共享内容、展示重要链接、显示产品选项，或提供对常用工具或资源的快速访问

如何使用它:

• jQuery和纯JavaScript/CSS中的10个最佳圆形菜单插件

如何使用它:

1.将菜单项和切换按钮添加到菜单容器中。在这个例子中，我们将使用Font Awesome标志性字体作为菜单图标。

<div class="menu-container">
  <div class="menu-toggle-btn">
    <i class="fa-solid fa-plus"></i>
  </div>
  <ul class="menu-list">
    <li class="menu-item">
      <a href="#"><i class="fa-brands fa-facebook"></i></a>
    </li>
    <li class="menu-item">
      <a href="#"><i class="fa-brands fa-twitter"></i></a>
    </li>
    <li class="menu-item">
      <a href="#"><i class="fa-brands fa-square-instagram"></i></a>
    </li>
  </ul>
</div>

2.设置切换按钮的样式和位置。

/* position the toggle button */
.menu-container {
  bottom: 0;
  right: 0;
  position: fixed;
}

/* position the toggle button */
.menu-toggle-btn {
  height: 56px;
  width: 56px;
  bottom: 0;
  right: 0;
  position: absolute;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FF008B;
  box-shadow: 3px 3px 2px 1px rgb(0 0 0 / 20%);
  z-index: 2;
  cursor: pointer;
}

.menu-toggle-btn i {
  font-size: 2rem;
  color: #eeeeee;
  transition: 0.5s;
}

.menu-toggle-btn.effect i {
  transform: rotate(135deg);
}

3.设置激活时将排列在切换按钮周围的菜单项的样式。

.menu-list {
  list-style: none;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
}

.menu-list .menu-item {
  height: 2.3rem;
  width: 2.3rem;
  bottom: 0.25rem;
  right: 0.25rem;
  position: absolute;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #6B48FF;
  transition: 0.5s;
}

.menu-list .menu-item a {
  text-decoration: none;
  color: #eeeeee;
}

.menu-list .menu-item:hover {
  background-color: #8864fd;
}

.menu-list.effect .menu-item {
  box-shadow: 3px 3px 2px 1px rgba(0, 0, 0, 0.2);
}

.menu-list.effect .menu-item:nth-of-type(1) {
  bottom: 4.25rem;
  right: 0.5rem;
  transition-delay: 0.2s;
}

.menu-list.effect .menu-item:nth-of-type(2) {
  bottom: 3.5rem;
  right: 3.5rem;
  transition-delay: 0.1s;
}

.menu-list.effect .menu-item:nth-of-type(3) {
  bottom: 0.5rem;
  right: 4.25rem;
}

/* add more items here */

4.激活菜单。在jQuery库之后复制并插入以下JavaScript代码段。完成。

$(document).ready(function () {
  $('.menu-toggle-btn').click(function () {
    $('.menu-toggle-btn').toggleClass("effect");
    $('.menu-list').toggleClass("effect");
  });
});

预览截图

jQuery和CSS/CS3 受材料启发 径向弹出菜单