如何基于details/summary实现右侧慢速滑入菜单？

实现核心原理 #

• 原生状态触发：依赖<details>标签的open原生属性，无需JS，通过CSS选择器details[open]就能关联菜单的展开/收起状态。
• 固定汉堡按钮：给<summary>设置position: sticky并指定right: 0，让汉堡按钮始终固定在视口右侧，不受页面滚动影响。
• 滑入动画实现：菜单列表<ul>初始状态通过transform: translateX(100%)完全移出右侧视口，配合transition属性，当<details>展开时，将transform改为translateX(0)，实现平滑滑入效果。
• 菜单定位逻辑：给<ul>设置position: absolute，并指定right: 100%（相对于父元素<summary>的位置），让菜单刚好停靠在汉堡按钮的左侧。

完整示例代码 #

HTML结构 #

<nav class="right-menu">
  <details>
    <summary></summary>
    <ul class="main-menu">
      <li>首页</li>
      <li>
        产品中心
        <ul class="sub-menu">
          <li>产品1</li>
          <li>产品2</li>
          <li>产品3</li>
        </ul>
      </li>
      <li>关于我们</li>
      <li>联系客服</li>
    </ul>
  </details>
</nav>

CSS样式 #

/* 重置默认样式 */
details, summary, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.right-menu details {
  position: relative;
}

/* 汉堡按钮样式 */
.right-menu summary {
  position: sticky;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  background-color: #333;
  cursor: pointer;
  border-radius: 4px;
  /* 隐藏原生三角符号 */
  list-style: none;
}

.right-menu summary::-webkit-details-marker {
  display: none;
}

/* 用伪元素实现汉堡三条线 */
.right-menu summary::before,
.right-menu summary::after,
.right-menu summary::marker {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background-color: #fff;
}

.right-menu summary::before {
  top: 12px;
}

.right-menu summary::after {
  bottom: 12px;
}

.right-menu summary::marker {
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 主菜单样式 */
.right-menu .main-menu {
  position: absolute;
  right: 100%;
  top: 0;
  background-color: #fff;
  border: 1px solid #eee;
  min-width: 180px;
  padding: 10px 0;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  /* 初始状态移出视口 */
  transform: translateX(100%);
  /* 滑入动画 */
  transition: transform 0.3s ease;
}

/* 展开时滑入菜单 */
.right-menu details[open] .main-menu {
  transform: translateX(0);
}

/* 菜单项样式 */
.right-menu .main-menu li {
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
}

.right-menu .main-menu li:hover {
  background-color: #f5f5f5;
}

/* 子菜单样式 */
.right-menu .sub-menu {
  position: absolute;
  right: 100%;
  top: 0;
  background-color: #fff;
  border: 1px solid #eee;
  min-width: 160px;
  padding: 10px 0;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

/* 鼠标悬停时显示子菜单 */
.right-menu .main-menu li:hover .sub-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

效果说明 #

• 汉堡按钮固定在视口右侧，滚动页面时不会消失。
• 点击汉堡按钮，主菜单从右侧平滑滑入并停靠在按钮左侧。
• 鼠标悬停在带子菜单的选项上，子菜单同样从右侧滑入，停靠在主菜单左侧。

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