html - 如何在移动网络上制作汉堡菜单按钮？

Question

我正在尝试在移动网络内的导航栏上创建一个汉堡包菜单按钮。这是我第一次构建移动网络。这段代码只显示了一个巨大的方形按钮，而不是一个漂亮的汉堡菜单。请帮忙。

<nav class="navbar-static-top">
 <div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand ui-link" onclick="window.location.href='/'"href</a>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#popup">
      <span class="text">Menu</span>
      <span class="icon-bars">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </span>
    </button>
  </div>
 </div>
</nav>

Answer 1

我不太确定您要完成什么，但是您在“汉堡菜单”中缺少的一件事是“条形”的颜色。

因此，如果您只是将例如 background-color 添加到您的 icon-bar 元素，它将显示汉堡包菜单。

.icon-bar {
  background-color: black;
}

JSFiddle