CSS Grid汉堡菜单动画修改求助：实现从右向左滑出

没问题，我帮你调整代码实现从右向左滑出的效果，只需要修改小屏幕媒体查询里的几个关键属性就行：

核心修改点： #

• 把菜单的初始定位从屏幕左侧外移到右侧外
• 调整触发时的平移方向，让菜单向左滑入
• 同步调整按钮对齐方式，适配新的菜单位置

修改后的媒体查询代码如下（仅保留修改部分，其余代码保持不变）：

@media only screen and (max-width: 599px) {
  #nav {
    transition: transform .3s ease-in-out;
    top: 0;
    bottom: 0;
    min-height: 100vh; /* override Safari bug */
    position: fixed;
    width: 300px;
    /* 将初始位置从左侧外改为右侧外 */
    right: -340px;
  }
  #nav:target {
    /* 平移方向改为向左，对应负数值 */
    transform: translateX(-340px);
  }
  .close {
    /* 关闭按钮现在在菜单左侧，调整为左对齐 */
    text-align: left;
    display: block;
    text-decoration: none;
    font-size: 3em;
    position: relative;
    top: -30px;
  }
  .open {
    /* 汉堡按钮放在屏幕右侧更符合交互习惯，调整为右对齐 */
    text-align: right;
  }
}

原理说明： #

原来的代码是让菜单初始处于left: -340px（屏幕左侧外部），触发时向右平移340px实现显示；现在改成初始在right: -340px（屏幕右侧外部），触发时向左平移340px（translateX(-340px)），这样就实现了从右向左滑出的效果。同时调整按钮对齐位置，让整体交互更符合用户预期。

你只需要替换原代码里对应的媒体查询部分，就能看到想要的效果啦！

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