Question

我有一个使用基础6的顶栏菜单。基本上它与基金会关于堆叠断点的示例相同。除了我已经为徽标添加了第三部分。

以下代码：

＆＃13;

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

＆＃13;

现在你可以看到这个在中型屏幕上堆叠了3个元素，按照堆叠的媒体类。

我想要实现的目标并没有成功，就是拥有2个不同的堆叠断点。

即大堆叠：一个+（两个+三个）

并且叠加在媒体上：一个+两个+三个。

（一/二/三指具有这些ID的元素）

为了澄清我希望它按照以下方式缩小浏览器的尺寸：

一二三

一个

二三

一个

2

3

Answer 1

经过多次搜索后，简短的回答是使用Foundation顶栏功能无法实现。所以我需要改写自己的。

解决问题的关键是使用媒体查询与正确的DIV嵌套相结合，在正确的时间将元素捕捉到正确的位置，就像基金会处理顶栏本身的方式一样，仅针对此特定情况断点模式。

两个+三个包含在一个更大的元素中，在指定的点下方标记下方。然后，当screeen缩小甚至更多时，它们也会低于彼此。

注意：这仍然使用Foundation的顶级条形码来正确堆叠菜单本身在＆＃34; 2＆＃34;。

Code pen here

＆＃13;

$(document).foundation();

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

基础6 - 在一个顶栏

1 个答案: