Bulma导航栏响应式实现教程

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      Logo
    </a>

    <a role="button" class="navbar-burger" data-target="navMenu">
      <span></span>
      <span></span>
      <span></span>
    </a>
  </div>

  <div class="navbar-menu" id="navMenu">
    <div class="navbar-start">
      <a class="navbar-item" href="/home">首页</a>
      <a class="navbar-item" href="/about">关于</a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="/login">登录</a>
      <a class="navbar-item" href="/signup">注册</a>
    </div>
  </div>
</nav>

document.querySelectorAll('.navbar-burger').forEach(burger => {
  burger.addEventListener('click', () => {
    const target = document.getElementById(burger.dataset.target);
    burger.classList.toggle('is-active');
    target.classList.toggle('is-active');
  });
});

.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

<div class="navbar-item">
  <form action="/search" method="get">
    <div class="field has-addons">
      <div class="control">
        &lt;input class=&quot;input&quot; type=&quot;text&quot; placeholder=&quot;搜索...&quot; name=&quot;q&quot;&gt;
      </div>
      <div class="control">
        <button class="button is-info" type="submit">搜索</button>
      </div>
    </div>
  </form>
</div>