在移动设备 Brealpoint 时,如何配置 Foundation 6 响应式菜单以从下拉菜单切换到钻取菜单?
Foundation documentation中的最后一个例子在中等或较大 View 中按预期工作,但仍以小 View 显示水平菜单!!
基本上,我如何让菜单像旧的 Foundation 5 菜单那样工作?
这个标记几乎有效,向下钻取有点作用,但菜单项仍然水平排列。
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-responsive-menu="drilldown medium-dropdown" >
<li class="menu-text">Site Title</li>
<li>
<a href="#">One</a>
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
最佳答案
摆脱dropdown
来自 <ul>
的类并添加类 vertical
和 medium-horizontal
到列表,所以它看起来像这样:
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
更新 : bugs与响应式菜单中的下拉箭头和子菜单折叠方向相关的问题已在 版本中得到修复。
foundation-sites 6.2.0
.相关 SO 问题: Foundation 6 data-responsive-menu parameters
关于zurb-foundation - 如何配置 Foundation 6 响应式菜单以在 Drilldown 和 Dropdown 类型之间切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34980718/