当前位置：首页 > CSS

css制作课程导航

2026-02-13 08:28:36CSS

课程导航设计思路

课程导航通常需要清晰展示章节层级、支持快速跳转，并具备视觉区分度。核心要素包括层级结构、交互状态、响应式适配。

HTML结构搭建

使用语义化标签构建导航框架，<nav>包裹整体，章节用<ul>嵌套实现多级菜单：

<nav class="course-nav">
  <ul>
    <li>
      <a href="#chapter1">第一章</a>
      <ul>
        <li><a href="#section1-1">第一节</a></li>
        <li><a href="#section1-2">第二节</a></li>
      </ul>
    </li>
  </ul>
</nav>

基础样式设计

设置最小宽度防止内容挤压，通过缩进表现层级关系：

.course-nav {
  min-width: 250px;
  background: #f8f9fa;
  border-right: 1px solid #e1e4e8;
}

.course-nav ul {
  list-style: none;
  padding-left: 1rem;
}

.course-nav li {
  margin: 0.5rem 0;
}

.course-nav a {
  display: block;
  padding: 0.5rem;
  color: #24292e;
  text-decoration: none;
  border-radius: 3px;
}

交互状态优化

使用CSS过渡效果提升用户体验，通过颜色变化标明当前状态：

.course-nav a:hover {
  background-color: #e1e4e8;
  transition: background 0.2s ease;
}

.course-nav a.active {
  background-color: #0366d6;
  color: white;
  font-weight: 600;
}

.course-nav .collapsed ul {
  display: none;
}

.course-nav .toggle::before {
  content: "+";
  margin-right: 0.5rem;
}

.course-nav .toggle.collapsed::before {
  content: "-";
}

响应式处理

通过媒体查询调整导航布局，小屏幕下转为可折叠模式：

@media (max-width: 768px) {
  .course-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e1e4e8;
  }

  .course-nav ul {
    padding-left: 0;
  }

  .course-nav > ul > li {
    margin: 0;
  }
}

视觉增强技巧

添加微交互提升质感，使用CSS变量统一主题色：

:root {
  --nav-active: #0366d6;
  --nav-hover: #e1e4e8;
}

.course-nav a {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.course-nav li {
  position: relative;
}

.course-nav li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: transparent;
  transition: background 0.3s;
}

.course-nav li.active::before {
  background: var(--nav-active);
}

css制作课程导航