Question

我使用Zurb相当新，所以我想知道是否有人可以为我提供一些启示。

http://www.bitandpiecesvape.co.uk/

这是我的网站目前（未运行Zurb）。我试图在Zurb重拍这个，但我在创建两个顶部栏时遇到了麻烦。

正如你在链接中看到的那样，我在横幅下面的深蓝色条中有5个链接，然后是它下方较浅蓝色区域中的类别。我怎样才能使它们像链接一样显示，但是在将浏览器调整为小的时候，它们都应该编译成下拉菜单。

我已尝试使用下面的代码，它确实有效......但第二个菜单只是漂浮在它下方。我已经尝试使用div行类分隔两个菜单，但它会停止整个工作......显然我需要它在两行上，所以我可以在它下面正确定位第二个菜单。

我很抱歉我无法上传当前版本的Zurb模板，但我现在正在笔记本电脑上离线运行所有这些因为我的FTP出现问题。

任何想法???

谢谢。

<div style="width: 100%; height: 100px; background: #0d233c">
            <div class="row">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1>
                                <span class="show-for-small-only"><a href="#"><B>Bitandpieces Vape</B></a></span>
                            </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">
                        <!-- Right Nav Section -->
                        <ul class="left" style='height: 100%'>
                          <li class="active"><a href="">Home</a></li>
                          <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                          <li class="active"><a href="ourteam/">Product Support</a></li>
                          <li class="active"><a href="services/">Contact Us</a></li>
                          <li class="active"><a href="aboutus/">About Us</a></li>
                        </ul>
                    </section>
                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="left" style='height: 100%'>
                          <li class="active"><a href="">Home</a></li>
                          <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                          <li class="active"><a href="ourteam/">Product Support</a></li>
                          <li class="active"><a href="services/">Contact Us</a></li>
                          <li class="active"><a href="aboutus/">About Us</a></li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>

Answer 1

使用单独的顶栏实例创建两个顶部栏而不是添加部分应该解决导航堆叠正确的问题，如果这最终是您选择用于此目的。

    <nav class="top-bar" data-topbar role="navigation">
         <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="left" style='height: 100%'>
                      <li class="active"><a href="">Home</a></li>
                      <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                      <li class="active"><a href="ourteam/">Product Support</a></li>
                      <li class="active"><a href="services/">Contact Us</a></li>
                      <li class="active"><a href="aboutus/">About Us</a></li>
                    </ul>
                </section>

            </nav>
    <nav class="top-bar" data-topbar role="navigation">

                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>
                <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="left" style='height: 100%'>
                      <li class="active"><a href="">Home</a></li>
                      <li class="active"><a href="portfolio/">Shipping & Postage</a></li>
                      <li class="active"><a href="ourteam/">Product Support</a></li>
                      <li class="active"><a href="services/">Contact Us</a></li>
                      <li class="active"><a href="aboutus/">About Us</a></li>
                    </ul>
                </section>

            </nav>

我还建议坚持使用基础网格系统并将顶部横幅部分完全分离出来并避开那些高度：100种样式。只要您使用他为Foundation创建的所有类，该站点就会响应并且表现良好。

Zurb Foundation两个顶级酒吧

1 个答案: