Zurb Foundation 5 - 顶栏 - 在小浏览器窗口上折叠但不在移动设备上折叠

Having lifted the code from the documentation page

解除了文档页面中的代码

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"> 
[etc...]
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

The ensuing result is that collapsing a browser desktop window generates the menu icon and active sub-item links.

随后的结果是折叠浏览器桌面窗口生成菜单图标和活动子项链接。

It collapses as expected in Chrome normal desktop mode... however when accessing Chrome's developer tools all mobile renderings are not generating the menu icon (and neither, obviously the sub-items).

它在Chrome普通桌面模式下按预期崩溃...但是当访问Chrome的开发人员工具时,所有移动渲染都没有生成菜单图标(显然也没有生成子项)。

Various issues verified... Loading all foundation javascripts at the end of the body tag does not change behaviour. Removing files with custom css classes for mobile instances which are loaded after foundation.css does not alter behaviour. No application code, aside from robots.txt, calls user-agent.

验证了各种问题...在body标记的末尾加载所有基础javascripts不会改变行为。删除在foundation.css之后加载的移动实例的自定义css类的文件不会改变行为。除robots.txt外,没有应用程序代码调用user-agent。

The following may be relevant, but I believe it came with the base code:

以下可能是相关的,但我相信它带有基本代码:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 58.75em; }

So the menu is being generated on small desktop screens but not on mobile ones.

因此,菜单是在小型桌面屏幕上生成的,而不是在移动设备上生成的。

How can this be fixed? Is there a foundation configuration that somehow disables this logic for mobile?

怎么解决这个问题?是否有基础配置以某种方式禁用此移动逻辑?

1 个解决方案

#1

Not the expected answer. And a kludge to boot. But I still fail to pinpoint why the toggling is not occurring (while in other instances proper styles are being applied to small viewports with foundation's css.)

不是预期的答案。和一个kludge引导。但是我仍然无法确定为什么没有发生切换(而在其他情况下,正确的样式被应用于具有基础的css的小视口。)

Essentially swap out one side with a dropdown, recreating the menu.

基本上用一个下拉键换出一侧,重新创建菜单。

Soooo... this being a rails application, using in conjunction with the browser gem (condition if browser) and font awesome gem for a quicker route to generating the hamburger icon, the following does the trick, er... kludge.

Soooo ......这是一个rails应用程序,结合浏览器gem(条件如果浏览器)和字体真棒宝石,以便更快地生成汉堡包图标,以下是诀窍,呃... kludge。

<!-- Right Nav Section -->
<ul class="right">
<% if browser.mobile? %>
  <li class="has-dropdown">
    <a href="#menu"><i class="fa fa-bars"></i> Menu</a>
    <ul class="dropdown">
      <li class="active"> [etc.][etc.]

#1