如何将Bootstrap非响应式菜单改为特定分辨率下的汉堡折叠菜单

针对你现有的非响应式菜单，以下是完整的改造方案，可实现特定分辨率下切换为汉堡图标折叠菜单的效果：

1. 调整HTML结构 #

先给现有菜单添加容器和汉堡按钮，方便后续控制：

<div class="menu-wrapper">
  <!-- 汉堡按钮，默认隐藏 -->
  <button class="hamburger-toggle" id="hamburgerBtn">☰</button>
  
  <!-- 原有菜单列表，新增ID方便JS控制 -->
  <ul class="f-cb menu-content" id="mainMenu">
    <!-- 你的原有菜单代码 -->
    <li runat="server" id="Li1" visible="true" class="about-li">
      <a class="tit" href="/events_list.aspx" >Eventi</a>
    </li>
    <li runat="server" id="Distributori" visible="false" class="about-li">
      <a class="tit">Area Riservata</a>
      <div class="con f-cb none">
        <!-- 下拉内容 -->
      </div>
    </li>
    <!-- 其他菜单项保持不变 -->
  </ul>
</div>

2. 更新CSS样式（含媒体查询） #

通过CSS控制汉堡按钮和菜单的显示逻辑，适配不同屏幕尺寸：

/* 基础样式：汉堡按钮默认隐藏 */
.hamburger-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
  padding: 8px 12px;
}

/* 菜单默认横向布局 */
.menu-content {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 媒体查询：设置触发汉堡菜单的断点（示例为992px，可按需调整） */
@media screen and (max-width: 992px) {
  .hamburger-toggle {
    display: block; /* 显示汉堡按钮 */
  }
  
  .menu-content {
    display: none; /* 隐藏菜单 */
    flex-direction: column; /* 折叠后纵向排列 */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff; /* 匹配你的网站背景色 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* 菜单展开状态 */
  .menu-content.active {
    display: flex;
  }
  
  /* 调整菜单项样式适配纵向布局 */
  .menu-content .about-li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  
  .menu-content .about-li a.tit {
    padding: 12px 16px;
  }
  
  /* 下拉菜单适配移动端 */
  .menu-content .about-li .con {
    position: static;
    box-shadow: none;
    width: 100%;
    padding-left: 24px;
  }
}

/* 保留你已有的媒体查询 */
@media screen and (max-width: 1453px) {
  header .nav-box a.tit {
    transition: color 0.3s;
    width: 100%;
    height: 100%;
    color: rgb(51, 51, 51);
    font-size: 13px;
    display: block;
  }
}

@media screen and (max-width: 1184px) {
  #LabelMember {
    display:none;
  }
}

3. 添加JavaScript交互逻辑 #

实现汉堡按钮点击切换菜单展开/收起，以及下拉菜单的适配：

document.addEventListener('DOMContentLoaded', function() {
  const hamburgerBtn = document.getElementById('hamburgerBtn');
  const mainMenu = document.getElementById('mainMenu');
  
  // 汉堡按钮切换菜单
  hamburgerBtn.addEventListener('click', function() {
    mainMenu.classList.toggle('active');
    // 切换汉堡图标为关闭图标
    hamburgerBtn.textContent = mainMenu.classList.contains('active') ? '✕' : '☰';
  });
  
  // 移动端点击菜单项后自动收起菜单
  const menuLinks = mainMenu.querySelectorAll('a.tit');
  menuLinks.forEach(link => {
    link.addEventListener('click', function() {
      if (window.innerWidth <= 992) {
        mainMenu.classList.remove('active');
        hamburgerBtn.textContent = '☰';
      }
    });
  });
  
  // 下拉菜单移动端展开/收起
  const dropdownItems = mainMenu.querySelectorAll('.about-li');
  dropdownItems.forEach(item => {
    const title = item.querySelector('a.tit');
    const dropdown = item.querySelector('.con');
    if (dropdown) {
      title.addEventListener('click', function(e) {
        if (window.innerWidth <= 992) {
          item.classList.toggle('active');
          dropdown.style.display = item.classList.contains('active') ? 'block' : 'none';
          e.preventDefault();
        }
      });
    }
  });
});

关键说明 #

• 可根据你的需求修改媒体查询的断点（比如把992px换成你需要的分辨率）
• 如果项目已引入Bootstrap，可以直接使用navbar-toggler组件简化汉堡按钮样式
• 确保菜单容器的父元素设置position: relative，避免下拉菜单定位错误

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