列表在导航中的应用

列表在导航中的应用

导航是网页设计中不可或缺的一部分，而列表元素（<ul>、<ol>、<dl>）因其结构化特性，常被用于构建各种导航菜单。通过CSS的灵活控制，列表能够实现从简单的文本链接到复杂的多级下拉菜单。

基础导航列表

最简单的导航通常使用无序列表（<ul>）包裹链接（<a>）实现。这种结构语义清晰，即使没有CSS也能保持可读性：

<nav>
  <ul class="main-nav">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li><a href="/services">服务</a></li>
    <li><a href="/contact">联系我们</a></li>
  </ul>
</nav>

对应的基础CSS样式可以移除默认列表样式并创建水平导航：

.main-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  background: #333;
}

.main-nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: block;
}

.main-nav a:hover {
  background: #555;
}

多级下拉菜单

通过嵌套列表可以实现多级导航。关键点在于使用CSS控制子菜单的显示/隐藏：

<ul class="dropdown-nav">
  <li><a href="/">首页</a></li>
  <li>
    <a href="/products">产品</a>
    <ul class="submenu">
      <li><a href="/products/phones">手机</a></li>
      <li><a href="/products/laptops">笔记本</a></li>
    </ul>
  </li>
</ul>

.dropdown-nav {
  position: relative;
  list-style: none;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.dropdown-nav li:hover > .submenu {
  display: block;
}

面包屑导航

有序列表（<ol>）适合表现层级关系的面包屑导航：

<nav aria-label="面包屑导航">
  <ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="/electronics">电子产品</a></li>
    <li><span aria-current="page">智能手机</span></li>
  </ol>
</nav>

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: 0 0.5rem;
}

标签云导航

定义列表（<dl>）可用于创建非线性的标签云导航：

<dl class="tag-cloud">
  <dt>热门标签：</dt>
  <dd><a href="/tag/css" style="--size: 1">CSS</a></dd>
  <dd><a href="/tag/html" style="--size: 2">HTML</a></dd>
  <dd><a href="/tag/js" style="--size: 3">JavaScript</a></dd>
</dl>

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tag-cloud a {
  font-size: calc(1rem + var(--size) * 0.2rem);
  opacity: calc(0.7 + var(--size) * 0.1);
}

响应式导航菜单

通过媒体查询和JavaScript配合，列表可以转换为适应移动设备的汉堡菜单：

<nav class="responsive-nav">
  <button class="menu-toggle" aria-expanded="false">☰</button>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

.responsive-nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .responsive-nav ul {
    display: none;
    position: absolute;
    top: 3rem;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
  }
  
  .responsive-nav ul[aria-expanded="true"] {
    display: flex;
  }
  
  .menu-toggle {
    display: block;
  }
}

document.querySelector('.menu-toggle').addEventListener('click', function() {
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', !expanded);
  document.querySelector('.responsive-nav ul').setAttribute('aria-expanded', !expanded);
});

带图标的导航列表

结合伪元素或图标字体可以增强导航的视觉表现：

<ul class="icon-nav">
  <li><a href="/account"><span class="visually-hidden">账户</span></a></li>
  <li><a href="/cart"><span class="visually-hidden">购物车</span></a></li>
</ul>

.icon-nav {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.icon-nav a {
  display: block;
  width: 2rem;
  height: 2rem;
  text-indent: -9999px;
  position: relative;
}

.icon-nav a::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Material Icons";
  text-indent: 0;
}

.icon-nav li:nth-child(1) a::before {
  content: "person";
}

.icon-nav li:nth-child(2) a::before {
  content: "shopping_cart";
}

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

分页导航

有序列表特别适合表现分页导航的序列特性：

<nav aria-label="分页导航">
  <ol class="pagination">
    <li><a href="/items?page=1" aria-label="第一页">«</a></li>
    <li><a href="/items?page=4">4</a></li>
    <li><a href="/items?page=5" aria-current="page">5</a></li>
    <li><a href="/items?page=6">6</a></li>
    <li><a href="/items?page=7" aria-label="最后一页">»</a></li>
  </ol>
</nav>

.pagination {
  display: flex;
  list-style: none;
  gap: 0.5rem;
}

.pagination a {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  text-decoration: none;
}

.pagination [aria-current="page"] {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

步骤指示器导航

自定义计数器样式可以创建步骤流程导航：

<ol class="step-indicator">
  <li class="completed">购物车</li>
  <li class="completed">填写订单</li>
  <li class="current">支付</li>
  <li>完成</li>
</ol>

.step-indicator {
  display: flex;
  list-style: none;
  counter-reset: step;
}

.step-indicator li {
  position: relative;
  flex: 1;
  text-align: center;
  padding-top: 2rem;
}

.step-indicator li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  background: #ddd;
}

.step-indicator .completed::before {
  content: "✓";
  background: #4CAF50;
  color: white;
}

.step-indicator .current::before {
  background: #2196F3;
  color: white;
}

选项卡式导航

通过CSS伪类和兄弟选择器可以实现纯CSS的选项卡切换：

<ul class="tab-nav">
  <li><a href="#tab1">选项卡1</a></li>
  <li><a href="#tab2">选项卡2</a></li>
</ul>
<div class="tab-content">
  <div id="tab1">内容1...</div>
  <div id="tab2">内容2...</div>
</div>

.tab-nav {
  display: flex;
  list-style: none;
  border-bottom: 1px solid #ddd;
}

.tab-nav a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  margin-bottom: -1px;
}

.tab-nav a:hover {
  border-color: #eee #eee #ddd;
}

.tab-content > div {
  display: none;
  padding: 1rem;
  border: 1px solid #ddd;
  border-top: none;
}

.tab-content > div:target {
  display: block;
}

可访问性考虑

无论采用何种导航形式，都需要确保良好的可访问性：

1. 使用<nav>元素标识导航区域
2. 为导航添加适当的ARIA属性
3. 确保键盘可操作
4. 提供足够的颜色对比度
5. 使用skip navigation链接

<a href="#main-content" class="skip-link">跳过导航</a>
<nav aria-label="主导航">
  <!-- 导航内容 -->
</nav>
<main id="main-content">
  <!-- 页面主要内容 -->
</main>

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 0;
  z-index: 1000;
}