我尝试创建一个带有 Logo 、左侧菜单和右侧菜单的响应式顶部栏。在移动设备上,我希望水平菜单成为“汉堡包图标”下的垂直菜单。
我希望 Logo 始终可见。对于汉堡包图标左侧的移动设备。还要添加图标。
我检查了 Zurb 的示例,但我不希望 Logo /网站标题进入较小屏幕上的汉堡包菜单。
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
</div>
<div class="top-bar">
<li><img src="" > </li>
<div id="main-menu">
<div class="top-bar-left">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">Albums</a></li>
<li><a href="#">Music</a></li>
<li><input type="search" placeholder="Search"></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="dropdown vertical medium-horizontal menu">
<li><a href="#">Contact</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
我想达到下面的结果(这是用bootstrap完成的)
最佳答案
在这种情况下,您可以使小屏幕中的图像有所不同(如果需要,可以更小)。 Foundation 6 文档还不是很好,所以这里是您的代码的一个很好的实现。请务必包含栏的背景颜色。不需要太多额外的 CSS。
<div class="title-bar" style="width:100%;background-color: #262626;">
<div class="title-bar-left hide-for-medium">
<span class="title-bar-title"><img src="http://placehold.it/80x40?text=Viberr" ></span>
<button data-responsive-toggle="responsive-menu" class="menu-icon" type="button" ></button>
</div>
<div id="responsive-menu" >
<div class="top-bar-title">
<img src="http://placehold.it/80x40?text=Viberr" >
</div>
<div class="top-bar-left">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">Albums</a></li>
<li><a href="#">Music</a></li>
<li><input type="search" placeholder="Search"></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="dropdown vertical medium-horizontal menu">
<li><a href="#">Contact</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
关于html - 基础 6 - 顶栏 |如何在较小的设备上保留 Logo ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37163552/