当前位置：首页 > CSS

css制作右侧导航条

2026-02-12 17:10:52CSS

固定定位实现右侧导航条

使用CSS的position: fixed属性将导航条固定在视窗右侧，适用于需要常驻显示的导航栏。示例代码：

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

滚动跟随效果实现

结合position: sticky实现滚动时跟随内容区域的效果，适合长页面场景：

css制作右侧导航条

.container {
  display: flex;
}
.content {
  flex: 1;
}
.right-nav {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  margin-left: 20px;
  width: 180px;
}

响应式设计处理

通过媒体查询在小屏幕隐藏或重构导航栏：

css制作右侧导航条

@media (max-width: 768px) {
  .right-nav {
    position: static;
    width: 100%;
    margin: 20px 0;
    order: -1; /* 移动端调整显示顺序 */
  }
}

动态高亮当前章节

配合JavaScript实现滚动时自动高亮当前章节：

.right-nav a.active {
  color: #ff6b6b;
  font-weight: bold;
  border-left: 3px solid #ff6b6b;
  padding-left: 10px;
}

悬浮动画增强体验

添加平滑的悬浮动画效果提升交互体验：

.right-nav a {
  display: block;
  padding: 8px 0;
  transition: all 0.3s ease;
}
.right-nav a:hover {
  transform: translateX(-5px);
  color: #4dabf7;
}

关键实现要点包括合理控制z-index层级避免遮挡、设置适当的宽度避免影响主要内容区域、考虑无障碍访问的键盘导航支持等。实际应用时可根据具体设计需求调整颜色、间距和动效参数。