Question

我正在尝试使导航栏具有两行：第一行用于辅助菜单，第二行用于主菜单。我对Bulma相当陌生，寻找解决方案并不像Bootstrap那样容易。

到目前为止，这是我的小提琴（HTML结构）。

<div class="navbar nav-secondary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
            Part of Larger Holding
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">

    </div>

    <div class="navbar-end">
      <a class="navbar-item">
              Menu 1
            </a>
      <a class="navbar-item">
              Menu 2
            </a>

      <div class="navbar-item field">
         <p class="control has-icons-right">
           <input class="input" type="search" placeholder="Search...">
                     <span class="icon is-small is-right">
                     </span>
         </p>
      </div>
    </div>
  </div>
</div> <!-- nav -->

<nav class="navbar nav-primary" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">

    </div>

    <div class="navbar-end">
      <a class="navbar-item">
              About
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
                Team
              </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
                  Management
                    </a>
          <a class="navbar-item">
                  Experts
                    </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
                  Apply!
                    </a>
        </div>
      </div>

      <a class="navbar-item">
              Articles
            </a>

    </div>
  </div>
</nav>

可以看出，到目前为止，我的解决方案是制作两个布尔玛导航栏。

然后，我要使移动版式看起来像这样。搜索输入被隐藏，搜索图标出现在第二行。第二行中的链接被隐藏，而是显示一个汉堡菜单。同时，第一行中的链接仍然可见。

我的问题可能有两个：

我不确定这种HTML结构，因为它似乎多余吗？我如何最好地构造它？
与结构相符，应该如何使它像我解释的那样显示移动布局？

任何准则如何做到？

Answer 1

许多事情在这里发生！所以，据我了解，您想在navbar burger上打开最多两个navbar项目，对吗？

1）首先，我看到您的navbar-end仅出现在导航栏项目之前。您希望在商品之后。

布尔玛的例子：

<div id="navbarBasicExample" class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
    Home
    </a>

    <a class="navbar-item">
    Documentation
    </a>

    <div class="navbar-item has-dropdown is-hoverable">
      <a class="navbar-link">
      More
      </a>

      <div class="navbar-dropdown">
        <a class="navbar-item">
        About
        </a>
        <a class="navbar-item">
        Jobs
        </a>
        <a class="navbar-item">
        Contact
        </a>
        <hr class="navbar-divider">
        <a class="navbar-item">
        Report an issue
        </a>
      </div>
    </div>
  </div>

<div class="navbar-end">

2）-NavBar-这是Bulma文档的一部分：

<a role="button" class="navbar-burger" data-target="nav-menu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

请确保保留三个<span>标签-这些标签将成为汉堡的三行。

3）然后，这是一个非常酷的部分-要真正获得导航栏的行为以在单击时进行切换，您需要在“ NavBar”后面添加一些文档部分中指定的JS。 “菜单”主题（蓝色部分称为“ JavaScript Toggle”：https://bulma.io/documentation/components/navbar/。有两种方法可以为该功能创建JS，但是文档的工作方式与我编写方式相同。请确保添加JS您的主HTML文件中的<script>标签之间！

希望这会有所帮助！阅读我在此答案中链接的布尔马文档部分。他们真的很好地解释了使用修饰符来帮助您的常规HTML代码的术语！

布尔玛：尝试使导航栏具有两行，在移动中将第一行的搜索输入移至第二行

1 个答案: