Основа 6 Меню верхней панели, как у Airbnb

#javascript #html #css #zurb-foundation #zurb-foundation-6

#javascript #HTML #css #zurb-основа #zurb-основа-6

Вопрос:

Я пытаюсь создать верхнюю панель, используя Foundation 6, аналогичную Airbnb, но у меня возникли проблемы с ее созданием, особенно с окном поиска. (https://www.airbnb.co.uk )

Вот в codepen: 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>

Спасибо!

1. Возможно, стоит добавить скрипку / codepen с этим там.

2. @CollinD Спасибо, я добавил codepen

3. У вас уже есть окно поиска во всю ширину экрана (если вы не хотите, чтобы оно было перемещено влево, а перед ним помещено изображение), у вас возникли проблемы с off-canvas или отображением кнопки на меньших экранах, чтобы открыть страницу модального поиска?

4. @ChrisO Я хочу сделать его похожим на верхнюю панель Airbnb, с окном поиска во всю ширину по центру

Ответ №1:

Я думаю, это приведет вас туда, куда вы идете. Как обычно, измените по мере необходимости, и вам нужно будет позаботиться о ссылке на стиль / css и значок лупы.

 <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">amp;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 -->