css制作右侧导航条

右侧导航条制作方法

固定定位法 使用CSS的position: fixed属性将导航条固定在视窗右侧。设置right属性控制距离右侧的距离，top属性控制垂直位置。

.right-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
}

Flexbox布局法 在父容器中使用Flexbox布局，将导航条放在最右侧。这种方法适合需要响应式布局的情况。

.container {
  display: flex;
  justify-content: space-between;
}
.right-nav {
  width: 200px;
  margin-left: auto;
}

绝对定位法 在相对定位的父元素内使用绝对定位，适合特定区域内的右侧导航。

.parent {
  position: relative;
}
.right-nav {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
}

悬浮效果增强 为导航项添加悬停效果，提升用户体验。

.nav-item {
  padding: 8px;
  transition: background 0.3s;
}
.nav-item:hover {
  background: #e0e0e0;
  cursor: pointer;
}

响应式处理 添加媒体查询，在小屏幕设备上调整导航样式或隐藏。

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

滚动跟随效果 结合JavaScript实现导航条随页面滚动保持在可视区域。

window.addEventListener('scroll', function() {
  const nav = document.querySelector('.right-nav');
  nav.style.top = window.scrollY + 'px';
});