如何使用CSS实现右侧菜单从右向左展开至页面中部的效果

核心思路：通过给右侧父容器设置相对定位，将子菜单的定位锚点从左边缘改为右边缘，即可实现菜单向左扩展的效果，具体实现如下：

• 第一步：为右侧18%宽度的容器添加相对定位，作为子菜单的定位上下文

/* 类名替换为你实际使用的右侧区域类名即可 */
.right-area {
  position: relative;
}

• 第二步：在移动端媒体查询中修改右侧菜单的定位规则，删除原有left属性，新增right: 0配置

注意：不要同时给菜单设置left和right属性，否则会导致菜单宽度被异常拉伸

/* 移动端断点可根据实际业务需求调整 */
@media (max-width: 768px) {
  /* 左侧菜单保留原有逻辑即可 */
  .left-area .menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 50vw;
    /* 原有菜单的背景、边距、层级等样式无需修改 */
  }

  /* 右侧菜单修改定位锚点 */
  .right-area .menu {
    position: absolute;
    right: 0; /* 核心配置：以父容器右边缘为起点对齐 */
    top: 100%;
    width: 50vw;
    /* 原有菜单的背景、边距、层级等样式无需修改 */
  }
}

• 可选兜底配置：如果仍偶发横向滚动条，给最外层头部容器添加横向溢出隐藏

/* 类名替换为你实际使用的头部容器类名即可 */
.header-container {
  width: 100%;
  overflow-x: hidden;
}

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