Question

我正在尝试创建一个包含2行的固定顶栏，如图 enter image description here

中所述

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

<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

任何想法？

Answer 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>

由于高度固定为45px，我必须加倍才能添加第二行的背景：

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

Answer 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

顶部酒吧有2个导航行 - Zurb Foundation 5

2 个答案: