如何使用CSS将网页顶部目录（TOC）转换为侧边栏布局？

Got it! Let's turn that top-placed table of contents into a fixed sidebar matching the bookdown style you referenced. Here's a step-by-step solution:

Step 1: Tweak Your HTML Structure #

First, wrap your TOC and main content in a container to make layout easier. This helps separate the sidebar from your page content cleanly:

<div class="page-container">
  <!-- Sidebar TOC -->
  <div id="toc-sidebar">
    <h2>Table of Contents</h2>
    <div id="text-table-of-contents">
      <ul> <!-- Removed inline style, we'll handle this in CSS -->
        <li><a href="#orgbdecee3">Topic 1</a></li>
        <li><a href="#orgxyz1234">Topic 2</a></li>
        <!-- Add more TOC items here -->
      </ul>
    </div>
  </div>

  <!-- Main Page Content -->
  <div id="main-content">
    <h2 id="orgbdecee3">Topic 1</h2>
    <p>Your content for Topic 1 goes here...</p>

    <h2 id="orgxyz1234">Topic 2</h2>
    <p>Your content for Topic 2 goes here...</p>
    <!-- More page content -->
  </div>
</div>

Step 2: Add the CSS Styles #

Create a CSS file (or add these styles to your existing one) to style the sidebar and layout:

/* Reset default browser styles for consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container to hold sidebar + main content */
.page-container {
  display: flex;
  min-height: 100vh; /* Ensure container takes full viewport height */
}

/* Sidebar TOC styling */
#toc-sidebar {
  position: sticky;
  top: 0;
  width: 280px; /* Adjust width to match your preference */
  padding: 2rem 1.5rem;
  background-color: #f8f9fa; /* Light gray background, matching bookdown */
  border-right: 1px solid #e9ecef;
  overflow-y: auto; /* Enable scrolling if TOC is too long */
  height: 100vh; /* Fix sidebar to full viewport height */
}

/* TOC header style */
#toc-sidebar h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}

/* TOC list styling */
#text-table-of-contents ul {
  list-style: none; /* Remove default bullet points */
}

#text-table-of-contents li {
  margin-bottom: 0.5rem;
}

#text-table-of-contents a {
  text-decoration: none;
  color: #2c3e50; /* Dark gray text */
  font-size: 0.95rem;
}

#text-table-of-contents a:hover {
  color: #3498db; /* Blue hover effect */
  text-decoration: underline;
}

/* Main content area styling */
#main-content {
  flex: 1; /* Let main content take remaining space */
  padding: 2rem 4rem;
  max-width: 900px; /* Limit width for readability */
  margin: 0 auto; /* Center content horizontally */
}

/* Responsive adjustment for mobile screens */
@media (max-width: 768px) {
  .page-container {
    flex-direction: column; /* Stack sidebar on top of main content */
  }
  
  #toc-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }
  
  #main-content {
    padding: 2rem 1.5rem;
  }
}

Key Features Explained #

• Sticky Sidebar: The position: sticky property keeps the TOC fixed at the top as you scroll the main content.
• Scrollable TOC: overflow-y: auto ensures long directories can be scrolled without breaking the layout.
• Responsive Design: The media query switches the layout to a stacked view on mobile, so it works well on all screen sizes.
• Bookdown-like Styling: Uses subtle grays and blue hover effects to match the reference site's clean, academic look.

内容的提问来源于stack exchange，提问作者hatmatrix