如何在 Foundation 5 中组合顶部栏和标签栏

Question

是否可以合并top-bar 和tab-bar（画布外）？

这个：

调整为移动设备大小时变成这个：

但我也想在其中包含标签栏（画布外），所以它变成这样

我无法想象如何做到这一点，我试图制作我的自定义菜单图标并将其放在顶部栏中，但我在定位方面遇到了问题，元素消失了，边距/填充不起作用, 位置相对更乱了我的风格，所以我想在这里问也许你有更好的主意。

Answer 1

有两种方法可以做到这一点，首先你可以使用media queries 或者另一种方法是使用可见性类。例如，在顶部栏代码中添加 class="show-for-medium-up"，这将使顶部栏在中屏及以上屏幕中可见，但在小屏幕中隐藏。

<nav class="top-bar show-for-medium-up" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">........................

然后添加offcanvas的代码并添加class="hide-for-medium-up"

<div class="off-canvas-wrap hide-for-medium-up">
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>

通过这样做，您将能够根据屏幕尺寸实现不同的样式。欲了解更多信息，请查看visibility class