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

Question

是否可以组合顶栏和标签栏(画布外)？

这个:

调整为移动尺寸时变为此:

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

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

Answer 1

有两种方法可以做到这一点，第一种方法是使用媒体查询，另一种方法是使用可见性类。例如，在顶部栏代码中添加 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>

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