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

Question

是否可以合并top-bar和 tab-bar ( Canvas 外)？

这个:


调整到手机尺寸时变成这样:



但我还想包括标签栏( Canvas 外)所以它变成这样



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

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