响应式屏幕垂直菜单栏问题求助：折叠后需显示全屏左侧菜单

Hey there! Let's get your vertical navigation working exactly how you want it—full-height left sidebar on mobile toggle, no dropdowns. I’ve broken down the fixes into simple steps based on your setup:

1. Override Bootstrap’s Default Collapse Behavior #

Bootstrap’s .navbar-collapse defaults to a dropdown on small screens, so we’ll rewrite that to make it a fixed full-height sidebar:

@media (max-width: 999px) {
  /* Make the collapsed sidebar fixed and full-height */
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* Match your desktop sidebar width */
    height: 100vh;
    background-color: #fff; /* Replace with your navbar background color */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    padding-top: 60px; /* Space for the toggle button at the top */
    z-index: 999;
  }

  /* Show the sidebar when the 'show' class is added */
  .navbar-collapse.show {
    transform: translateX(0);
  }

  /* Lock body scroll when sidebar is open */
  body.nav-open {
    overflow: hidden;
  }

  /* Keep the toggle button visible on top of everything */
  .navbar-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
  }
}

2. Fix Menu Item Layout for Mobile #

Make sure your menu items match the desktop layout (no dropdown stacking):

@media (max-width: 999px) {
  .navbar-nav {
    margin: 0;
    width: 100%;
  }

  .navbar-nav > li {
    float: none;
    width: 100%;
  }

  .navbar-nav > li > a {
    padding: 15px 20px;
    display: block;
    width: 100%;
  }
}

3. Update Toggle Button Interaction #

Replace Bootstrap’s default collapse JS with a custom toggle to add/remove our show class:

$('.navbar-toggle').on('click', function(e) {
  e.preventDefault();
  $('.navbar-collapse').toggleClass('show');
  $('body').toggleClass('nav-open');
});

// Close sidebar when clicking outside the navbar
$(document).on('click', function(e) {
  if (!$(e.target).closest('.navbar').length) {
    $('.navbar-collapse').removeClass('show');
    $('body').removeClass('nav-open');
  }
});

What This Does: #

• On screens under 1000px, your sidebar stays full-height but is hidden off-screen by default
• Clicking the toggle slides it in from the left, matching your desktop layout exactly
• The body scroll locks when the sidebar is open to prevent background scrolling
• Clicking anywhere outside the sidebar closes it automatically

Just swap out the background color and width values to match your existing design, and you’ll have that clean left-sidebar toggle like your reference!

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