如何实现菜单项间带拱形分隔的菜单样式？

根据你需要的菜单布局（垂直层级结构，带图标、选中高亮、子菜单展开/收起），可以用HTML语义化结构 + Flexbox布局 + 原生JS交互的组合高效实现，以下是具体思路和代码示例：

1. 语义化HTML结构 #

用<nav>、<ul>、<li>等标签构建菜单，清晰区分主菜单和子菜单，便于维护和SEO：

<nav class="sidebar-menu">
  <ul class="menu-main">
    <li class="menu-item active">
      <a href="#" class="menu-link">
        <span class="menu-icon">🏠</span>
        <span class="menu-text">首页</span>
      </a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#" class="menu-link">
        <span class="menu-icon">📁</span>
        <span class="menu-text">文件管理</span>
        <span class="menu-arrow">▼</span>
      </a>
      <ul class="submenu">
        <li class="submenu-item">
          <a href="#" class="submenu-link">新建文件</a>
        </li>
        <li class="submenu-item active">
          <a href="#" class="submenu-link">我的文档</a>
        </li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#" class="menu-link">
        <span class="menu-icon">⚙️</span>
        <span class="menu-text">设置</span>
      </a>
    </li>
  </ul>
</nav>

2. Flexbox实现高效布局 #

用Flexbox快速实现菜单的垂直排列、图标与文字的对齐，同时通过CSS过渡实现平滑的展开/收起动画：

/* 重置默认列表样式 */
.sidebar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu {
  width: 240px;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
}

.menu-item {
  margin-bottom: 4px;
}

.menu-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
  gap: 12px;
  transition: background-color 0.2s;
}

/* 选中状态高亮 */
.menu-item.active .menu-link,
.submenu-item.active .submenu-link {
  background-color: #2196f3;
  color: #fff;
}

/* 子菜单默认隐藏 */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
}

/* 展开子菜单 */
.menu-item.has-submenu.open .submenu {
  max-height: 200px; /* 根据子项数量调整高度 */
}

.submenu-link {
  display: block;
  padding: 10px 16px 10px 40px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.2s;
}

/* 箭头旋转动画 */
.menu-arrow {
  margin-left: auto;
  transition: transform 0.3s;
}

.menu-item.has-submenu.open .menu-arrow {
  transform: rotate(180deg);
}

3. 原生JS实现交互逻辑 #

通过点击事件切换类名，实现子菜单的展开/收起，逻辑简单高效：

const submenuTriggers = document.querySelectorAll('.menu-item.has-submenu .menu-link');

submenuTriggers.forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    e.preventDefault();
    trigger.closest('.menu-item.has-submenu').classList.toggle('open');
  });
});

优化建议 #

• 使用CSS变量统一管理颜色、间距，后续修改样式更便捷：--menu-bg: #f5f5f5; --active-color: #2196f3;
• 若为大型项目，可直接使用UI框架的菜单组件（如Element UI Menu、Ant Design Menu），减少重复造轮子
• 增加响应式适配，小屏幕下可折叠菜单仅显示图标

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