如何在WordPress（Elementor Pro）中创建Radial Dial菜单？

核心思路 #

通过CSS变量结合JavaScript自动计算菜单项的角度与位置，无需手动调整尺寸；增减菜单项时仅需修改HTML结构，布局会自动适配；同时通过响应式媒体查询适配不同屏幕尺寸。

Elementor 实现步骤 #

1. 在Elementor编辑器中拖入自定义HTML模块到目标位置
2. 粘贴以下HTML代码到模块中
3. 进入页面设置 → 自定义CSS，粘贴样式代码
4. 进入页面设置 → 自定义JS，粘贴脚本代码

HTML 代码 #

<div class="radial-dial-menu">
  <div class="highlight-overlay"></div>
  <div class="menu-items">
    <button class="menu-item">菜单项1</button>
    <button class="menu-item">菜单项2</button>
    <button class="menu-item">菜单项3</button>
    <button class="menu-item">菜单项4</button>
    <!-- 直接增减button标签即可调整菜单项数量，无需修改其他代码 -->
  </div>
</div>

CSS 样式 #

.radial-dial-menu {
  position: relative;
  width: 300px;
  height: 150px; /* 半圆高度等于半径 */
  margin: 50px auto;
}

.highlight-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 100, 100, 0.3);
  transform-origin: center top;
  transform: translateX(-50%) rotate(-90deg);
  opacity: 0;
  transition: opacity 0.2s, transform 0.3s ease;
  pointer-events: none;
}

.menu-items {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  --item-count: 4; /* JS会自动覆盖该值 */
  --radius: 150px;
  --angle: calc(180deg / var(--item-count));
}

.menu-item {
  position: absolute;
  top: 0;
  left: 50%;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #2c3e50;
  color: white;
  cursor: pointer;
  transform-origin: center top;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.menu-item:hover {
  background: #3498db;
}

/* 响应式适配 */
@media (max-width: 480px) {
  .radial-dial-menu {
    width: 240px;
    height: 120px;
  }
  .highlight-overlay {
    width: 240px;
    height: 240px;
  }
  .menu-items {
    --radius: 120px;
  }
  .menu-item {
    width: 50px;
    height: 50px;
    font-size: 12px;
  }
}

JavaScript 脚本 #

const menuContainer = document.querySelector('.radial-dial-menu');
const menuItems = menuContainer.querySelectorAll('.menu-item');
const highlightOverlay = menuContainer.querySelector('.highlight-overlay');
const itemCount = menuItems.length;

// 动态设置菜单项数量变量
menuContainer.querySelector('.menu-items').style.setProperty('--item-count', itemCount);
const anglePerItem = 180 / itemCount;

// 自动定位每个菜单项
menuItems.forEach((item, index) => {
  // 计算旋转角度，确保菜单项均匀分布在半圆上
  const rotateAngle = -90 + (index * anglePerItem) + (anglePerItem / 2);
  item.style.transform = `translateX(-50%) rotate(${rotateAngle}deg) translateY(var(--radius)) rotate(${-rotateAngle}deg)`;
  
  // hover时切换高亮层的扇形区域
  item.addEventListener('mouseenter', () => {
    highlightOverlay.style.opacity = 1;
    highlightOverlay.style.transform = `translateX(-50%) rotate(${(-90 + index * anglePerItem)}deg)`;
    // 计算扇形裁剪路径，匹配菜单项对应的顶部区域
    const radian = (anglePerItem * Math.PI) / 180;
    const clipX = 50 + 50 * Math.cos(radian);
    const clipY = 50 * Math.sin(radian);
    highlightOverlay.style.clipPath = `polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 0%, ${clipX}% ${clipY}%)`;
  });
  
  // 鼠标离开时隐藏高亮层
  item.addEventListener('mouseleave', () => {
    highlightOverlay.style.opacity = 0;
  });
});

功能说明 #

• 自适应布局：增减菜单项时，JS会自动重新计算每个项的角度与位置，无需手动调整CSS
• Hover高亮：鼠标悬停菜单项时，顶部对应扇形区域会高亮显示
• 响应式适配：移动端自动缩小容器与按钮尺寸，保持布局比例

内容的提问来源于stack exchange，提问作者RitZz