如何在无Bootstrap类的自定义导航栏中实现左侧可折叠导航？

Absolutely! You can convert your existing top navigation into a collapsible left sidebar easily. Below is a modified version of your code that implements this functionality, including a toggle button to show/hide the sidebar (great for mobile or compact layouts):

Modified HTML #

<!-- Toggle Button for Collapsing Sidebar -->
<button id="sidebarToggle" class="sidebar-toggle">☰</button>

<!-- Collapsible Sidebar -->
<div class="sidebar" role="navigation">
  <div class="sidebar-content">
    <a class="active" href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <form action="#">
      <div class="search-container">
        <input type="text" placeholder="Search..">
        <button type="submit"><i class="fa fa-search"></i></button>
      </div>
    </form>
  </div>
</div>

<!-- Main Content (to push when sidebar expands) -->
<div class="main-content">
  <!-- Your page content goes here -->
</div>

CSS Styling #

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sidebar Toggle Button */
.sidebar-toggle {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 24px;
  background: #333;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 1001;
}

/* Sidebar Base Style */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  background-color: #333;
  overflow-x: hidden;
  transition: width 0.3s ease;
  z-index: 1000;
  padding-top: 60px; /* Make space for toggle button */
}

/* Expanded Sidebar */
.sidebar.open {
  width: 250px;
}

/* Sidebar Links */
.sidebar a {
  display: block;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  transition: background 0.2s;
}

.sidebar a.active,
.sidebar a:hover {
  background-color: #555;
}

/* Search Container */
.search-container {
  padding: 12px 16px;
  display: flex;
  gap: 4px;
}

.search-container input {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

.search-container button {
  background: #ddd;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* Main Content Adjustment */
.main-content {
  margin-left: 0;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.sidebar.open ~ .main-content {
  margin-left: 250px;
}

JavaScript for Toggle Functionality #

document.getElementById('sidebarToggle').addEventListener('click', function() {
  const sidebar = document.querySelector('.sidebar');
  sidebar.classList.toggle('open');
});

Key Notes: #

• The sidebar starts collapsed (width: 0) and expands to 250px when the toggle button is clicked (adjust this width to match your wireframe).
• Smooth transitions are added using CSS transition properties for a polished look.
• The main content shifts right when the sidebar expands to avoid overlap.
• You can customize colors, padding, and sizing to match your design requirements.
• The Font Awesome search icon will work as long as you have the Font Awesome library linked in your project (if not, replace <i class="fa fa-search"></i> with text like "Search").

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