大纲按钮 CSS

在网页开发中，我们常常需要给网页内容添加大纲导航，方便用户了解文章结构并快速跳转到指定内容。而“大纲按钮”则是一种快捷的实现方式，它通常处于页面的一个固定位置，点击后可以展开一个包含网页内容结构的大纲，方便用户跳转到指定内容。

实现原理

要实现大纲按钮，我们需要用到以下技术：

• HTML：定义页面结构；
• CSS：定义样式，包括按钮的样式和大纲的样式；
• JavaScript：实现按钮点击后展开大纲和跳转功能。

代码示例：

<!-- HTML 结构 -->
<div class="outline">
  <button class="outline-btn">大纲</button>
  <ul class="outline-list"></ul>
</div>

<!-- CSS 样式 -->
<style>
  .outline {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
  }
  .outline-btn {
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
  }
  .outline-list {
    margin-top: 10px;
    list-style: none;
  }
  .outline-list li {
    margin-bottom: 5px;
    font-size: 12px;
    color: #666;
  }
</style>

<!-- JavaScript 代码 -->
<script>
  var contentEles = document.querySelectorAll('.content > *');
  var outlineList = document.querySelector('.outline-list');
  for (var i = 0; i < contentEles.length; i++) {
    var ele = contentEles[i];
    var eleName = ele.tagName.toLowerCase();
    if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(eleName) !== -1) {
      var li = document.createElement('li');
      li.innerText = ele.innerText;
      li.setAttribute('data-h', eleName);
      li.setAttribute('data-id', 'outline-' + i);
      outlineList.appendChild(li);
      ele.setAttribute('id', 'outline-' + i);
    }
  }
  document.querySelector('.outline-btn').addEventListener('click', function() {
    document.querySelector('.outline-list').classList.toggle('show');
  });
  document.querySelector('.outline-list').addEventListener('click', function(e) {
    if (e.target.tagName.toLowerCase() === 'li') {
      var targetEle = document.querySelector('#' + e.target.getAttribute('data-id'));
      targetEle.scrollIntoView();
    }
  });
</script>

以上代码实现了一个简单的大纲按钮，并可以跳转到指定内容。

样式调整

如果需要根据实际需求调整样式，可以修改以下 CSS 属性：

• .outline：大纲按钮和大纲列表容器的样式；
• .outline-btn：大纲按钮的样式；
• .outline-list：大纲列表的样式；
• .outline-list li：每个大纲项的样式。

注意事项

• 大纲按钮和大纲列表容器的 position: fixed 属性可以保证它们始终处于页面上方，方便用户查看大纲。
• 大纲列表的内容可以通过 JavaScript 自动生成，方便网页内容更新时自动更新大纲。
• 大纲列表的样式也可以根据实际需求进行调整，比如更改字体、字号、行高等属性，以便更好地展示大纲内容。