Foundation 移动菜单不会出现在小屏幕上答案

【问题标题】：Foundation mobile menu won't appear on small screenFoundation 移动菜单不会出现在小屏幕上
【发布时间】：2015-11-21 01:56:52
【问题描述】：

我的头快要爆炸了。我无法在小屏幕上显示移动“汉堡包”菜单。 “菜单”一词可见，但图标不切换。

这可能是非常明显的事情，但我已经看这个太久了，看不到保险库。有谁能帮忙吗？

我是否调用了正确的 JS？

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Title</title>
<!--Favicon-->
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600, 400,300' rel='stylesheet' type='text/css'>
<!--CSS-->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<!--FOUNDATION JS-->
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>

这是我的导航部分

<div class="topbar">
  <div class="row">
    <div class="large-4 columns">
      <a href="#home"><h1 class="logo">Website Name</h1></a>
    </div>
    <div class="large-8 text-right columns">
    <div class="navbar">
      <div class="large-12 columns">
        <nav class="top-bar" data-topbar role="navigation">
        <ul class="right button-group title-area">
        <li><a href="#home" class="button nav">Home</a></li>
        <li><a href="#about" class="button nav">About</a></li>
        <li><a href="#office" class="button nav">Examples</a></li>
        <li><a href="#contact" class="button nav navlast">Contact</a></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
        </ul>
        </nav>
       </div>
     </div>
    </div>
  </div>
  </div>

【问题讨论】：

发布后不要对代码进行改进。 mrseo88 的回答现在没有意义，并且有被其他人否决的风险。
@mousey 将修改和恢复原始代码。
我没有看到任何响应式 css

标签： javascript jquery css zurb-foundation zurb-foundation-5

【解决方案1】：

你错过了一些基础 js 包含和功能，试试这样：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Title</title>
<!--Favicon-->
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600, 400,300' rel='stylesheet' type='text/css'>
<!--CSS-->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<!--FOUNDATION JS-->
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>

【讨论】：

欣赏答案。可悲的是它没有用。切换到小屏还是没有切换到手机菜单

【解决方案2】：

将顶栏包含在如此小的容器中会导致菜单项没有空间。由于 jquery 是依赖关系，因此调用在 jquery 之前导入的 top-bar.js 文件也不起作用。

您实际上不需要再次调用它，因为foundation.min.js 包含所有插件。

【讨论】：