如何基于现有Bulma导航栏添加侧边弹出子菜单？

你提的这个需求很典型——Bulma原生确实没有内置侧边弹出式的子菜单组件，官方文档里确实找不到相关内容，毕竟它的默认菜单系统主要围绕下拉、汉堡菜单这类常见模式设计。不过不用慌，我们可以基于Bulma现有的类和结构，用少量CSS+JS快速实现，完全不会破坏你现有导航栏的状态。

下面是最贴合你需求的实现思路，尽量复用Bulma的现有样式，避免大改：

核心思路：复用Bulma现有类，自定义侧边子菜单的位置与交互 #

Bulma的dropdown组件基础样式已经很完善，我们只需要调整它的定位逻辑，把“向下展开”改成“侧边展开”，同时保留原有导航的所有交互和样式。

1. 调整HTML结构（不破坏原有导航）

在需要侧边子菜单的父菜单项里，嵌套Bulma原生的dropdown-menu结构，但给它加一个自定义类（比如sidebar-dropdown-menu）来区分普通下拉菜单：

<!-- 假设你现有导航的结构是这样 -->
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <!-- 普通下拉菜单（保留原有状态） -->
      <div class="dropdown is-hoverable">
        <div class="dropdown-trigger">
          <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>原有下拉菜单</span>
          </button>
        </div>
        <div class="dropdown-menu" id="dropdown-menu" role="menu">
          <!-- 原有下拉菜单项 -->
        </div>
      </div>

      <!-- 需要侧边子菜单的菜单项 -->
      <div class="navbar-item has-sidebar-dropdown">
        <a class="navbar-link" href="#">父菜单项</a>
        <!-- 复用Bulma的dropdown-menu，加自定义类 -->
        <div class="dropdown-menu sidebar-dropdown-menu">
          <a class="dropdown-item" href="#">子菜单1</a>
          <a class="dropdown-item" href="#">子菜单2</a>
          <a class="dropdown-item" href="#">子菜单3</a>
        </div>
      </div>
    </div>
  </div>
</nav>

2. 用CSS调整侧边子菜单的显示位置

通过自定义CSS覆盖dropdown-menu的默认定位，让它从侧边弹出，同时加过渡动画保证交互流畅：

/* 给父菜单项设置相对定位，作为子菜单的定位基准 */
.has-sidebar-dropdown {
  position: relative;
}

/* 自定义侧边子菜单的样式 */
.sidebar-dropdown-menu {
  position: absolute;
  top: 0;
  right: 0; /* 如果要从左侧弹出，改成 left: 100% */
  height: 100vh; /* 高度占满视口 */
  width: 220px; /* 自定义宽度 */
  transform: translateX(100%); /* 默认隐藏在右侧 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  /* 复用Bulma的阴影样式，保持视觉统一 */
  box-shadow: 0 8px 16px rgba(10,10,10,.1);
}

/* 激活状态下显示子菜单 */
.has-sidebar-dropdown.is-active .sidebar-dropdown-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

3. 少量JS控制交互逻辑

复用Bulma的is-active类来控制子菜单的显示/隐藏，同时处理点击外部关闭的逻辑，和原有下拉菜单的交互保持一致：

// 绑定侧边子菜单的点击触发事件
document.querySelectorAll('.has-sidebar-dropdown .navbar-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    // 切换当前菜单项的激活状态
    const parentItem = link.closest('.has-sidebar-dropdown');
    parentItem.classList.toggle('is-active');
    
    // 关闭其他已打开的侧边子菜单
    document.querySelectorAll('.has-sidebar-dropdown.is-active').forEach(item => {
      if (item !== parentItem) {
        item.classList.remove('is-active');
      }
    });
  });
});

// 点击页面其他区域时，关闭所有侧边子菜单
document.addEventListener('click', () => {
  document.querySelectorAll('.has-sidebar-dropdown.is-active').forEach(item => {
    item.classList.remove('is-active');
  });
});

// 点击子菜单内部时，不关闭菜单
document.querySelectorAll('.sidebar-dropdown-menu').forEach(menu => {
  menu.addEventListener('click', (e) => {
    e.stopPropagation();
  });
});

额外注意事项 #

• 响应式适配：如果需要在移动端调整侧边子菜单的样式（比如全屏显示），可以用Bulma的响应式类（比如is-hidden-mobile/is-hidden-desktop）或者媒体查询来修改CSS。
• 样式统一：如果你的项目用了Bulma的Sass变量，可以把侧边子菜单的宽度、颜色等和全局变量绑定，保持样式一致性；纯CSS项目直接调整上面的数值即可。
• 不影响原有功能：这个方案完全独立于原有下拉菜单，不会改变它们的交互和样式，完美契合你“保留现有状态”的需求。

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