基础 6：如何将水平导航与图像居中

Question

我使用 zurb foundation 6，我对它非常满意。但我正在与 header 作斗争。我的目标是实现这样的主导航：我如何才能将菜单项置于水平导航中并以图像（徽标）作为分隔线？

我的尝试是对导航项使用 ul 列表：

<nav class="row header show-for-large">
  <div class="large-5 column">
    <ul class="main-nav-left">
      <li>Women</li>
      <li>Men</li>
      <li>Store</li>
      <li>Blog</li>
    </ul>
  </div>
  <div class="large-2 column ">
    <%= image_tag("test-Logo.png", alt: "Nile Logo") %>
  </div>
  <div class="large-5 column">
    <ul class="main-nav-right">
      <li>EN & FR</li>
      <li>Login</li>
      <li>Wunschliste</li>
      <li>Warenkorb</li>
    </ul>
  </div>
</nav>

Answer 1

我最近迁移了 Foundation 6 的 Centered Top Bar With Logo 构建块。它应该正是您所追求的。

HTML

<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
  <a class="logo-small show-for-small-only" href="#"><img src="http://placehold.it/50x50?text=LOGO" /></a>
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">

  <div class="logo-wrapper hide-for-small-only">
    <div class="logo">
      <img src="http://placehold.it/350x150?text=LOGO">
    </div>
  </div>

  <!-- Left Nav Section -->
  <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>

  <!-- Right Nav Section -->
  <div class="top-bar-right">
    <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
      <li class="has-submenu">
        <a href="#">Menu 4</a>
        <ul class="submenu menu vertical medium-horizontal" data-submenu>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Menu 5</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </div>

</nav>

SCSS

/* Variables */

// Adjust width accordingly (use even #'s)
$logo-width: 118px;
// Reduce px value to increase space between logo and menu text
$logo-padding: $logo-width - 32px; 
// Leave alone
$logo-margin: - ($logo-width / 2);

/* Small Navigation */
.logo-small {
  float: right;
}

.title-bar {
  padding: 0 .5rem;
}

.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
}

/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) { 

  .logo-wrapper {
    position: relative;

    .logo {
      width: $logo-width;
      height:  92px;
      position: absolute;
      left: 50%;
      right: 50%;
      top: -6px;
      margin-left: $logo-margin;
    }
  }

  // Right part
  .top-bar-right {
    width: 50%;
    padding-left: $logo-padding;

    ul {
      float: left;
    }
  }

  // Left part
  .top-bar-left {
    width:  50%;
    padding-right: $logo-padding;

    ul {
      float: right;
    }
  }
}

基础 6：如何将水平导航与图像居中

foundation 6: how to center horizontal navigation with image

html

css

zurb-foundation

zurb-foundation-6

HTML

SCSS