html - Foundation 6 - 在单个顶部栏中有多个堆叠断点

Question

我有一个使用 foundation 6 的顶栏菜单。 本质上它与 Foundation 中有关堆叠断点的示例相同，只是我添加了第三部分作为 Logo 。

See this forked pen

代码如下:

<div class="top-bar">
  <div class="top-bar-left stacked-for-large">
    <div class="top-bar-title">
      <img src="http://via.placeholder.com/200x40">
    </div>
  </div>
  <div class="top-bar stacked-for-medium">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li class="menu-text">Site Title</li>
        <li class="has-submenu">
          <a href="#0">One</a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#0">One</a></li>
            <li><a href="#0">Two</a></li>
            <li><a href="#0">Three</a></li>
          </ul>
        </li>
        <li><a href="#0">Two</a></li>
        <li><a href="#0">Three</a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</div>

现在您可以看到，按照 stacked-for-medium 类，这会在中型屏幕上堆叠 3 个元素。

我想要实现但没有成功的是拥有 2 个不同的堆叠断点。

即堆叠为大:一+(二+三)

然后堆叠为介质:一 + 二 + 三。

(一/二/三指代具有这些ID的元素)

澄清一下，我希望随着浏览器的缩小，它会如下所示:

一二三

---

一个

二三

---

一个

两个

三个

Answer 1

经过大量搜索后，简短的回答似乎是无法使用 Foundation 顶栏功能。所以我需要自己重写。

解决它的关键是使用媒体查询结合正确的 DIV 嵌套，在正确的时间将元素捕捉到正确的位置，就像 Foundation 处理顶部栏本身的方式一样，只是针对这个特定的断点模式。

两个 + 三包含在一个更大的元素中，在特定点处在 Logo 下方有水滴。然后，随着屏幕进一步缩小，它们也落在彼此下方。

注意:这仍然使用 Foundation 的顶部条形码来将菜单本身正确堆叠在“两个”内。

Code pen here

$(document).foundation();

.topbar {
  background : aquamarine;
}
.topbar-logo {
  width: 274px;
  height: 50px;
  float: left;
  
  border: 1px solid;
}
@media only screen and (min-width: 1000px){
  .topbar-main-container {
    min-width: 1000px;
    float: left;
  }
  .topbar-right{
    float: right;
  }
}
@media only screen and (max-width: 999.99px){
  .topbar-right{
    float: left;
  }
}
@media only screen and (min-width: 700px) {
  topbar-main{
    min-width: 700px;
/*     width: calc(100% - 300px - 10px); */
  }
}
@media only screen and (max-width: 699.99px) {
  topbar-main{
    float: left;
  }
}
@media only screen and (min-width: 1274px){
  .topbar-main-container {
    width: calc(100% - 274px);

  }
}
@media only screen and (max-width: 1273.99px){
  .topbar-main-container {
    width: 100%;
    clear: both;
  }
}
.topbar-main {
  float: left;
  
  border: 1px solid;
}
.topbar-right{
  width: 350px;
  height: 50px;
  
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<div class="row expanded topbar">
  <div class="topbar-logo" id="one">
    <img src="http://via.placeholder.com/200x40">
  </div>
  <div class="topbar-main-container">
    <div class="topbar-main top-bar-left" id="two">
      <ul class="dropdown menu simple vertical medium-horizontal" data-dropdown-menu>
        <li class="menu-text">Site Title</li>
        <li class="has-submenu">
          <a href="#0">One</a>
          <ul class="submenu menu vertical" data-submenu>
            <li><a href="#0">One</a></li>
            <li><a href="#0">Two</a></li>
            <li><a href="#0">Three</a></li>
          </ul>
        </li>
        <li><a href="#0">Two</a></li>
        <li><a href="#0">Three</a></li>
        <li><a href="#0">Two</a></li>
        <li><a href="#0">Three</a></li>
        <li><a href="#0">Two</a></li>
        <li><a href="#0">Three</a></li>
        <li><a href="#0">Two</a></li>
        <li><a href="#0">Three</a></li>
        
      </ul>
    </div>
    <div class="topbar-right" id="three">
      Some names and stuff
    </div>    
  </div>
</div>