关于Mmenu（v9.x.x）的两个问题：宽度调整及Bootstrap适配

1. 调整Mmenu 9.x.x的宽度 #

有两种实用方法：

• 通过初始化配置设置：调用Mmenu初始化方法时，用offCanvas.width参数指定宽度，支持像素值或百分比：

  document.addEventListener(
    "DOMContentLoaded", () => {
      new Mmenu( "#menu", {
        offCanvas: {
          width: 320, // 也可写为"80%"这类百分比值
        }
      });
    }
  );
  

• 自定义CSS覆盖默认样式：如果需要更灵活的控制，直接覆盖Mmenu的默认类样式（注意CSS优先级，可添加父级选择器或!important确保生效）：

  /* 全局调整所有菜单宽度 */
  .mm-menu {
    width: 350px !important;
  }
  /* 仅调整左侧菜单宽度 */
  .mm--left .mm-menu {
    width: 85vw !important;
  }
  

2. Bootstrap 3.x/4.x中使用Mmenu 9.x的方法 #

完全可以兼容，具体操作步骤如下：

步骤1：按顺序引入资源 #

资源引入顺序必须遵循：

1. Bootstrap CSS文件
2. Mmenu CSS文件
3. jQuery库（Bootstrap和Mmenu均依赖jQuery）
4. Bootstrap JS文件
5. Mmenu JS文件

步骤2：页面结构示例 #

基于Bootstrap导航栏结构，添加Mmenu菜单容器：

<!-- Bootstrap导航栏 -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <button type="button" class="navbar-toggle" id="menu-trigger">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
</nav>

<!-- Mmenu菜单容器 -->
<nav id="my-menu">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
    <li>
      <span>产品分类</span>
      <ul>
        <li><a href="/category1">分类1</a></li>
        <li><a href="/category2">分类2</a></li>
      </ul>
    </li>
  </ul>
</nav>

步骤3：初始化Mmenu #

DOM加载完成后初始化Mmenu，并绑定触发按钮：

document.addEventListener(
  "DOMContentLoaded", () => {
    new Mmenu( "#my-menu", {
      offCanvas: {
        trigger: "#menu-trigger" // 绑定Bootstrap导航栏按钮作为菜单触发元素
      }
    });
  }
);

注意事项 #

• 若出现样式冲突，可通过自定义CSS调整优先级解决；
• Bootstrap 4导航栏类名改为navbar navbar-expand-lg等，只需对应调整触发按钮的类名，核心逻辑保持一致。

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