基金会手机菜单不会出现在小屏幕上

我的脑袋即将爆炸。我无法使移动“汉堡包”菜单出现在小屏幕上。单词“菜单”是可见的，但图标不切换。基金会手机菜单不会出现在小屏幕上

这可能是非常明显的，但我一直在寻找这个太久，无法看到金库。任何人都可以帮忙？

我在调用正确的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>

来源

2015-08-26 Kelvin Farrell

CSS发布后不改善添加到您的代码需要这个 – Mousey

。现在mrseo88的回答是没有意义的，而风险被其他人低估。 – Mousey

@mousey将修改并恢复原始代码。 –

你错过了一些基础的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>

来源

2015-08-26 21:18:02 mrseo88

欣赏答案。可悲的是，它没有奏效。当我切换到小屏幕时仍然没有切换到移动菜单 –

具有顶栏包含在这样的一个小容器会导致菜单项没有空间。在jquery不会工作之前调用top-bar.js文件，因为jquery是一个依赖项。

自从foundation.min.js拥有所有插件后，您实际上不需要再次调用它。

来源

2015-08-26 23:53:20 rafibomb

基金会手机菜单不会出现在小屏幕上

回答

相关问题