css右导航栏制作

右导航栏制作方法

固定定位实现右导航栏
使用position: fixed将导航栏固定在视口右侧，结合right和top属性控制位置。示例代码：

.right-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  background: #f5f5f5;
  padding: 15px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

Flexbox布局结合右浮动
在父容器中使用Flexbox布局，将导航栏设置为margin-left: auto实现右对齐：

.container {
  display: flex;
}
.right-nav {
  margin-left: auto;
  width: 20%;
  order: 2;
}

绝对定位配合右侧偏移
当需要相对于父容器定位时，使用position: absolute：

.parent {
  position: relative;
}
.right-nav {
  position: absolute;
  right: 0;
  width: 250px;
  height: 100vh;
  background: #fff;
}

响应式处理技巧

媒体查询调整宽度
在小屏幕设备上隐藏或调整导航栏：

@media (max-width: 768px) {
  .right-nav {
    display: none;
  }
}

粘性定位替代方案
使用position: sticky实现滚动时保持可见：

.right-nav {
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

视觉增强建议

添加过渡动画
悬停时平滑显示二级菜单：

.submenu {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.right-nav:hover .submenu {
  opacity: 1;
}

边框与阴影处理
增强视觉层次感：

.right-nav {
  border-left: 1px solid #e0e0e0;
  box-shadow: -3px 0 10px rgba(0,0,0,0.05);
}