基金會手機菜單不會出現在小屏幕上

我的腦袋即將爆炸。我無法使移動「漢堡包」菜單出現在小屏幕上。單詞「菜單」是可見的，但圖標不切換。基金會手機菜單不會出現在小屏幕上

這可能是非常明顯的，但我一直在尋找這個太久，無法看到金庫。任何人都可以幫忙？

我在調用正確的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

基金會手機菜單不會出現在小屏幕上

回答

相關問題