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

Question

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

此：

调整为移动尺寸时会变为此：

但是我也希望在那里包含tab-bar（画布外），所以它就像这样

我无法想象如何做到这一点我试图制作我的自定义菜单图标并将其放在顶栏中但是我有定位问题，元素消失，边距/填充没有＆＃ 39;工作，位置相对混淆了我的风格，所以我在这里问，也许你有更好的想法。

Answer 1

有两种方法可以做到这一点，首先你可以使用media queries，或者另一种方法是使用可见性类。例如在topbar代码中添加class =“show-for-medium-up”，这将使topbar在中等屏幕中可见，但是将其隐藏在较小的内容中。

<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