我正在尝试使用类似于Airbnb的Foundation 6创建顶部栏,但是在创建它时遇到了麻烦,尤其是搜索框。 (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>
谢谢!
答案 0 :(得分: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">×</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 -->