基础 6 - 顶栏 |如何在较小的设备上保留徽标？

Question

我尝试创建一个带有徽标、左侧菜单和右侧菜单的响应式顶部栏。在移动设备上，我希望水平菜单成为 "hamburger icon".

下的垂直菜单

我希望徽标始终可见。对于汉堡包图标左侧的移动设备。同时添加图标。

我检查了 Zurb 中的示例，但我不想 logo/site-title 进入小屏幕上的汉堡包菜单。

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
</div>
<div class="top-bar">
    <li><img src="" > </li>
<div  id="main-menu">
  <div class="top-bar-left">

    <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
          <li><a href="#">Albums</a></li>
          <li><a href="#">Music</a></li>
            <li><input type="search" placeholder="Search"></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="dropdown vertical medium-horizontal menu">
      <li><a href="#">Contact</a></li>
      <li><a href="#">Logout</a></li>
    </ul>
  </div>
</div>
</div>
</div>

我想达到以下结果（这是用 bootstrap 完成的）

Answer 1

在这种情况下，您可以使小屏幕中的图像有所不同（如果需要，可以更小）。 Foundation 6 文档还不是很好，所以这里是您的代码的一个很好的实现。请务必包含栏的背景颜色。不需要太多额外的 css。

    <div class="title-bar" style="width:100%;background-color: #262626;">
        <div class="title-bar-left hide-for-medium">
            <span class="title-bar-title"><img src="http://placehold.it/80x40?text=Viberr" ></span>
            <button data-responsive-toggle="responsive-menu" class="menu-icon" type="button" ></button>
        </div>

        <div id="responsive-menu" >
            <div class="top-bar-title">
                <img src="http://placehold.it/80x40?text=Viberr" >
            </div>

            <div class="top-bar-left">
                <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
                    <li><a href="#">Albums</a></li>
                    <li><a href="#">Music</a></li>
                    <li><input type="search" placeholder="Search"></li>
                </ul>
            </div>

            <div class="top-bar-right">
                <ul class="dropdown vertical medium-horizontal menu">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Logout</a></li>
                </ul>
            </div>
        </div>

    </div>

Answer 2

您需要为此添加一点 CSS。我已经修改了默认的顶栏示例。

HTML

<div class="top-bar stacked-for-small">
  <div class="top-bar-title">
    <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
      <button class="menu-icon dark" type="button" data-toggle></button>
    </span>
    <strong>Site Title</strong>
  </div>
  <div id="responsive-menu">
    <div class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><input type="search" placeholder="Search">
          <button type="button" class="button">Search</button></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
      </ul>
    </div>
  </div>
</div>

CSS

.menu>li {
    display: block;
}
.top-bar input {
    float:left;
}
.top-bar-title{
  float:none;
}
.top-bar-title span{
  float:right;
}
@media (min-width:640px){
  .menu>li {
      display: table-cell;
  }
  .top-bar-title{
    float: left;
  }
}

参见 CodePen 示例。 http://codepen.io/shoaibik/pen/wGORZY

基础 6 - 顶栏 |如何在较小的设备上保留徽标？

Foundation 6 - Top-Bar | How can I keep the logo on smaller devices?

html

css

navigation

zurb-foundation

zurb-foundation-6