首页 文章

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

提问于
浏览 次
0

解除了文档页面中的代码

<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的开发者工具 all 时，移动效果图会生成菜单图标（显然也不是子项目） .

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

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

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

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

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

javascript html css zurb-foundation

1 回答

  • 0

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

    基本上用dropdown替换一侧，重新创建菜单 .

    Soooo ...这是一个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.]
    回复于

相关问题