如何在Bootstrap中创建mega menu及获取对应免费模板资源

实现方法 #

• 基础依赖引入：先确保ERP项目已经引入Bootstrap 4/5的核心CSS、JS以及Popper.js（Bootstrap下拉组件核心依赖），建议使用稳定版本本地引入，避免CDN波动影响系统可用性。
• 基础结构搭建：基于Bootstrap原生的dropdown组件扩展，将原本的下拉项容器dropdown-menu替换为自定义的超大菜单容器，可根据导航栏宽度设置为固定宽度或者100%视口宽度。
• 功能区块布局：在超大菜单容器内部调用Bootstrap原生row、col-*栅格系统划分区块，可按照ERP的功能模块（如供应链、财务、人力资源、系统设置）分栏排列，每栏下方放置对应的子功能入口链接。
• 交互逻辑优化：桌面端ERP可设置鼠标悬停触发菜单展开，无需点击，给dropdown元素添加自定义CSS伪类:hover控制dropdown-menu的显示状态即可，移动端可保留默认的点击触发逻辑。
• 样式适配调整：覆盖Bootstrap默认下拉菜单样式，调整内边距、背景色、边框等属性，和现有ERP的UI风格统一，可添加轻微阴影提升菜单的层级感。

基础结构示例代码：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ERP系统</a>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <!-- 超大菜单入口 -->
        <li class="nav-item dropdown mega-dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
            供应链管理
          </a>
          <div class="dropdown-menu mega-menu w-100">
            <div class="row g-3 p-3">
              <!-- 第一栏：采购管理 -->
              <div class="col-lg-3">
                <h6>采购管理</h6>
                <ul class="list-unstyled">
                  <li><a class="dropdown-item" href="#">采购申请</a></li>
                  <li><a class="dropdown-item" href="#">供应商管理</a></li>
                  <li><a class="dropdown-item" href="#">采购订单</a></li>
                </ul>
              </div>
              <!-- 第二栏：库存管理 -->
              <div class="col-lg-3">
                <h6>库存管理</h6>
                <ul class="list-unstyled">
                  <li><a class="dropdown-item" href="#">入库单</a></li>
                  <li><a class="dropdown-item" href="#">出库单</a></li>
                  <li><a class="dropdown-item" href="#">库存盘点</a></li>
                </ul>
              </div>
              <!-- 可按需扩展更多栏 -->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

免费模板资源 #

• Bootstrap官方扩展示例：Bootstrap 5官方文档的导航栏章节提供了基础的超大菜单Demo代码，可以直接复制后修改内容适配ERP场景。
• 前端开源组件库内置模板：主流的Bootstrap扩展开源套件都有多套免费的超大菜单模板，支持响应式适配，直接替换文本和链接即可使用。
• 后台管理模板内置组件：免费开源的Bootstrap后台管理模板都自带适配后台场景的超大菜单组件，和ERP的功能适配度更高，可以直接剥离对应的HTML、CSS、JS代码使用。

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