Foundation 6 顶部栏菜单，如 Airbnb

Question

我正在尝试使用类似于 Airbnb 的 Foundation 6 创建顶部栏，但在创建顶部栏时遇到了问题，尤其是搜索框。 (https://www.airbnb.co.uk)

代码笔中的代码：http://codepen.io/anon/pen/WGarPp
下面是我正在处理的 html 代码：

<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
   <!-- off-canvas title bar for 'small' screen -->
   <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
      <div class="title-bar-left">
         <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
         <span class="title-bar-title">BRAND</span>
      </div>
   </div>
   <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
      <ul class="vertical menu" data-drilldown>
         <!-- start of the drilldown multi level menu -->
         <li>
            <a>Item 1</a>
            <ul class="vertical menu">
               <li><a href="#">Item 1A</a></li>
               <li><a href="#">Item 1B</a></li>
               <li><a href="#">Item 1C</a></li>
               <li><a href="#">Item 1D</a></li>
               <li><a href="#">Item 1E</a></li>
            </ul>
         </li>
         <li>
            <a>Item 2</a>
            <ul class="vertical menu">
               <li><a href="#">Item 2A</a></li>
               <li><a href="#">Item 2B</a></li>
               <li><a href="#">Item 2C</a></li>
               <li><a href="#">Item 2D</a></li>
               <li><a href="#">Item 2E</a></li>
            </ul>
         </li>
         <li>
            <a>Item 3</a>
            <ul class="vertical menu">
               <li><a href="#">Item 3A</a></li>
               <li><a href="#">Item 3B</a></li>
               <li><a href="#">Item 3C</a></li>
               <li><a href="#">Item 3D</a></li>
               <li><a href="#">Item 3E</a></li>
            </ul>
         </li>
         <li><a href="#">Item 4</a></li>
      </ul>
   </div>
   <!-- "wider" top-bar menu for 'medium' and up -->
   <nav class="marketing-topbar show-for-medium">
      <ul class="menu">
         <li class="topbar-title"><a href="#">BRAND</a></li>
      </ul>
      <ul class="dropdown menu" data-click-open="false" role="menubar">
         <li><input type="search" placeholder="Search"></li>
         <li role="menuitem">
            <a href="#" tabindex="0">Sign Up</a>
         </li>
         <li role="menuitem">
            <a href="#" tabindex="0">Login</a>
         </li>
      </ul>
   </nav>
</div>

谢谢！

Answer 1

我认为这会让您到达目的地。像往常一样，根据需要进行更改，您需要注意 styling/css 和放大镜图标 link。

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
    <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
        <ul class="vertical menu">
            <li><a href="#">Menu Foo</a></li>
            <hr/>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
        </ul>
    </div>
    <div class="off-canvas-content" data-off-canvas-content>
        <div class="content">
            <div class="title-bar no-print" style="width:100%;">
                <div class="title-bar-left hide-for-medium" style="width: 100%;">
                    <div class="title-bar-title text-center" style="width: 100%;">
                        <div class="row">
                            <div class="small-1 column position-left">
                                <button data-responsive-toggle="responsive-menu" class="menu-icon position-left" type="button" data-toggle="offCanvasLeft" style="padding:0;"></button>
                            </div>
                            <div class="small-10 column end">
                                <button data-open="exampleModal1" class="secondary hollow button small" style="width:80%;" >
                                    Where to?
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="responsive-menu" >
                    <div class="top-bar-title">
                        <img src="http://placehold.it/80x38/f3a3fe/000000?text=Brand+Icon" alt="Brand Icon">
                    </div>

                    <div class="top-bar-left" style="width:50%;">
                        <ul class="horizontal menu">
                            <input type="text" class="" placeholder="Where to?" style="color:white;background: url('images/turn_page20.png') no-repeat left 10px center;padding-left:45px;border:0;" />
                        </ul>
                    </div>

                    <div class="top-bar-right">
                        <ul class="horizontal menu">
                            <li><a href="#">Sign Up</a></li>
                            <li><a href="#">Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="reveal large text-center" id="exampleModal1" data-reveal>
                Search
                <p><input type="text" placeholder="Where to?" /></p>
                <p><input type="submit" value="Submit" /></p>
                <button class="close-button" data-close aria-label="Close modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="column row">
                Body content here.
            </div>
        </div><!-- end content -->
    </div><!-- end of off-canvas content -->
</div><!-- end off-canvas-wrapper-inner -->

Foundation 6 顶部栏菜单，如 Airbnb

Foundaiton 6 Top Bar Menu like Airbnb

html

javascript

css

zurb-foundation

zurb-foundation-6