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

Question

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

到目前为止，这是我的 fiddle (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 只出现在你的导航栏元素之前。您希望在您的元素之后。

bool 玛的例子:

<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，但文档的工作方式与我编写它的方式一样好。请务必在 <script> 标签之间添加 JS你的主要 HTML 文件!

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