带有 2 个导航行的顶栏 - Zurb Foundation 5答案

【问题标题】：A Top Bar with 2 navigation rows - Zurb Foundation 5带有 2 个导航行的顶栏 - Zurb Foundation 5
【发布时间】：2014-04-18 03:19:43
【问题描述】：

我正在尝试创建一个有 2 行的固定顶栏，如图中所述

到目前为止，我有以下代码，但它只呈现在一行中：

<div class="fixed contain-to-grid">
    <nav class="top-bar" 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">
            <!-- Left Nav Section -->
            <ul class="left">
                <li class="active"><a class="global-nav__link">About</a></li>
                <li class=""><a class="global-nav__link">Resume</a></li>
                <li class=""><a class="global-nav__link">Projects</a></li>
                <li class=""><a class="global-nav__link">Timeline</a></li>
                <li class=""><a class="global-nav__link active">Contacts</a></li>                    
            </ul>
            <!-- Right Nav Section -->
            <ul class="">
                <li class="active"><a href="#">EN</a></li>
                <li>|</li>
                <li><a href="#">PT</a></li>
            </ul>
        </section>
    </nav>
</div>

这里是 JSFiddle jsfiddle.net/Bonomi/cc9ay

有什么想法吗？

【问题讨论】：

请提供 CSS 和 JSfiddle
有人有线索吗？

标签： css responsive-design zurb-foundation

【解决方案1】：

http://jsfiddle.net/Ty3ZT/4/

这是你的意思吗？

如果是这样，则只有一行的 HTML，其中包含左右部分。

我已经为另一行添加了 HTML：

<!--second row-->

    <section class="top-bar-section">
        <!-- Left Nav Section -->
        <ul class="left">
            <li class="active"><a class="global-nav__link">Some</a></li>
            <li class=""><a class="global-nav__link">Buttons</a></li>
            <li class=""><a class="global-nav__link">Here</a></li>
            <li class=""><a class="global-nav__link">Timeline</a></li>
            <li class=""><a class="global-nav__link active">Contacts</a></li>                    
        </ul>           
    </section>

由于高度固定为 45 像素，我不得不将其加倍以添加第二行的背景：

.top-bar {
    height:90px;
    line-height:90px;
}

【讨论】：

你快到了。我希望“我的网站”占据第一行和第二行
jsfiddle.net/Ty3ZT/5 喜欢吗？您只需要增加 .name 类的高度和其中的 h1： .top-bar .name, .top-bar .name h1 { height:90px;行高：90px； }
是这样的，但是这2个栏只是右上排的语言栏（PT，EN）和左下排的导航栏
jsfiddle.net/Ty3ZT/6 只是用 'clear:right' 清除第二行的情况如果这已经为您解决了问题，请将我的答案标记为正确:)
我遇到了这个问题，虽然 Fiddles 中提供的解决方案适用于大屏幕，但它破坏了我的移动导航：点击菜单按钮不再有任何作用。对此有何建议？

【解决方案2】：

根据@Ben 的回答，我也在移动设备上进行了这项工作：

HTML （我不想删除我的棱角分明的东西，但我想你会明白的）：

<div class="sticky">
   <nav class="top-bar" data-topbar role="navigation" data-options="scrolltop: false">
     <ul class="title-area">
       <li class="name">
         <h1 class="show-for-small-only">
           <!-- text in mobile menu button -->
           <a href="#">
             MyApp - {{menu.CurrentTitle()}}
           </a>
         </h1>
       </li>
       <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
       <li class="toggle-topbar menu-icon">
         <a href="#">
           <span><!--Menu--></span>
         </a>
       </li>
     </ul>
     <section class="top-bar-section">
       <div ng-repeat="group in menu.Structure">
         <ul class="left">
           <!-- I have one featured "lead-item" in the beginning of the row -->
           <li>
             <a href="{{menu.GeneratePath(group.LeadItem)}}" class="lead-item" onclick="document.querySelector('nav.top-bar').classList.remove('expanded')">
                    {{group.LeadItem.Name}}
             </a>
           </li>
           <!-- these are just on the left -->
           <li ng-repeat="item in group.Items">
             <a href="{{menu.GeneratePath(item)}}"
                onclick="document.querySelector('nav.top-bar').classList.remove('expanded')">
               {{item.Name}}
                </a>
              </li>
              <li style="width: 15rem"></li>
            </ul>
            <!-- and these are on the right -->
            <ul class="right">
              <li ng-repeat="item in group.AdditionalItems">
                <a href="{{menu.GeneratePath(item)}}"
                   onclick="document.querySelector('nav.top-bar').classList.remove('expanded')">
                  {{item.Name}}
                </a>
              </li>
            </ul>
          </div>
        </section>
      </nav>
    </div>

SASS：

@media #{$medium-up} // mobile collapses as intended originally
  .sticky:not(.fixed) nav.top-bar
    height: 90px
    line-height: 90px

【讨论】：