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

Question

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

代码如下：

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

现在，正如您所看到的，这会根据中等堆叠 class.

在中等屏幕上堆叠 3 个元素

我想实现的是有 2 个不同的堆叠断点。

即堆叠为大：一+（二+三）

并堆叠为介质：一 + 二 + 三。

（one/two/three 引用具有这些 ID 的元素）

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

一二三

一个

二三

一个

两个

三个

Answer 1

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

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

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

注意：这仍然使用 Foundation 的顶部条形码在 "two" 中正确堆叠菜单本身。

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>

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

Foundation 6 - have multiple stacked-for breakpoints in a single top-bar

html

css

zurb-foundation

zurb-foundation-6

responsive