顶部栏有2个导航行 - Zurb Foundation 5 [英] A Top Bar with 2 navigation rows - Zurb Foundation 5

问题描述

我正在尝试创建一个固定的顶部条，其中包含2行，如图

I am trying to create a fixed top bar with 2 rows as described in the picture

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

So far I have the following code but it renders in only one row:

<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

Here is the JSFiddle jsfiddle.net/Bonomi/cc9ay

任何想法？

推荐答案

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

这是什么意思？

如果是这样，

我已为另一行添加了HTML：

I've added the HTML for another row:

<!--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，所以我必须加倍才能添加第二个背景行：

As the height was fixed to 45px I've had to double it to add the background for the second row:

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

这篇关于顶部栏有2个导航行 - Zurb Foundation 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！