Bulma：尝试用两行制作导航栏，在移动设备中，第一行的搜索输入移动到第二行

Question

我正在尝试用两行制作导航栏：第一行用于二级菜单，第二行用于主菜单。我对 Bulma 还很陌生，寻找解决方案并不像 Bootstrap 那样容易。

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

https://jsfiddle.net/wck1hj9r/4/

<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>

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

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

我的问题可能有两个方面：

• 我不确定这个 HTML 结构，因为它似乎是多余的？我将如何最好地构建它？
• 根据结构，我应该怎么做才能让移动布局像我解释的那样？

有什么指导方针吗？

Answer 1

这里发生了很多事情！所以，如果我理解，您希望导航栏汉堡最多打开两个导航栏项目，对吗？

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) 然后，这是非常酷的部分 - 要真正让导航栏的行为在点击时切换，您需要在“导航栏”之后的文档部分中添加一些 JS菜单”主题（名为“JavaScript Toggle”的蓝色部分：https://bulma.io/documentation/components/navbar/。有几种方法可以为功能创建 JS，但文档的工作方式与我编写它的方式一样。请务必在 @ 之间添加 JS 987654326@ 主 HTML 文件中的标签！

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