从文档页面提取代码
<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>
随后的结果是折叠浏览器桌面窗口会生成菜单图标和事件子项链接。
它在 Chrome 正常桌面模式下按预期折叠......但是当访问 Chrome 的开发者工具时,所有移动渲染不生成菜单图标(而且两者都不是,显然子项)。
已验证各种问题...在 body 标记末尾加载所有基础 javascript 不会改变行为。为在 foundation.css 之后加载的移动实例删除带有自定义 css 类的文件不会改变行为。除了 robots.txt 之外,没有任何应用程序代码调用 user-agent
。
以下可能是相关的,但我相信它是随基本代码一起提供的:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:40.063em)/";
width: 58.75em; }
所以菜单是在小桌面屏幕上生成的,而不是在移动屏幕上生成的。
如何解决这个问题?是否有基础配置以某种方式禁用此移动逻辑?
最佳答案
不是预期的答案。和启动的kludge。但我仍然无法确定为什么切换没有发生(而在其他情况下,适当的样式被应用到具有基础 css 的 small
视口(viewport)。)
基本上用 dropdown 换掉一侧, 重新创建菜单。
太棒了...这是一个 Rails 应用程序,与 browser gem 一起使用(条件 if browser
)和 font awesome 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.]
关于javascript - Zurb Foundation 5 - 顶部栏 - 在小浏览器窗口上折叠但在移动设备上不折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33412612/