Foundaiton 6 顶级酒吧菜单，如 Airbnb

Question

I am trying to create top bar using Foundation 6 similar to that of Airbnb but having trouble creating it, especially search box. ( https://www.airbnb.co.uk )

Here's in codepen: http://codepen.io/anon/pen/WGarPp
Below is the html code I am working on:

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

Thanks!

Answer 1

I think this will get you where you are going. As usual, alter as needed and you will need to take care of the styling/css and magnifier icon 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 -->