Foundation 6 数据响应菜单参数 [英] Foundation 6 data-responsive-menu parameters

问题描述

我正在用基础 6 构建一个响应式导航，集成在 wordpress 中.我想使用 data-responsive-menu 属性来触发小屏幕上的钻取插件.简单的.问题是我不想要其他屏幕尺寸上的任何其他插件.文档给出了这个例子:

I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The problem is that I don't want any of the other plugins on the other screen sizes. The documentation gives this example:

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">

但是这个在小屏幕上触发钻取插件，在大屏幕上触发下拉.如果我只使用drilldown"选项或small-drilldown"，它将针对所有媒体查询.我知道我可以调用 wp_nav_menu 的两个实例，分别是 show-for-small-only 和 show-for-medium-up，但我想知道是否可以在不打印两个相等的菜单的情况下实现这一点.

But this trigger drilldown plugin on small screens and dropdown on bigger ones. If I use only "drilldown" options, or "small-drilldown", it targets all media queries. I know that I could call two instances of wp_nav_menu, with show-for-small-only and show-for-medium-up, but I wonder if I can achieve this without printing two equal menus.

推荐答案

您只需要添加响应式类，告诉菜单从中向上是水平的，如下所示:

You just need to add the responsive class that tells the menu to be horizontal from medium and up, like so:

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

更新:错误 与响应式菜单中的下拉箭头和子菜单折叠方向相关的问题已在 foundation-sites 6.2.0 版本中修复.

Update: The bugs related to the dropdown arrows and submenu fold out direction in the responsive menu have been fixed in the release of foundation-sites 6.2.0.

这篇关于Foundation 6 数据响应菜单参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！