0
我試圖設置一個基礎的Web應用程序，我在導航欄正常工作時遇到了一些麻煩。當屏幕很大時它工作正常。這些按鈕全部出現在導航欄上。當我縮小屏幕時，按鈕會按預期消失，並出現菜單按鈕。不幸的是，菜單按鈕不起作用。點擊它不起作用。我的頁面中的腳本和css鏈接是有效的。我究竟做錯了什麼？沒有填充的基礎導航欄菜單按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="/foundation/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/foundation/css/foundation.css" rel="stylesheet" type="text/css">
<script src="/foundation/js/vendor/modernizr.js" type="text/javascript"></script>
<title>TITLE</title>
</head>
<body>
<script src="/foundation/js/vendor/jquery.js" type="text/javascript"></script><script src="/foundation/js/foundation.min.js" type="text/javascript"></script><script>$(document).foundation();</script>
<div class="row">
<div class="small-12 medium-4 columns">
<h1>Title</h1>
</div>
<div class="small-0 medium-4 columns"></div>
<div class="small-12 medium-3 columns">search</div>
</div>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active"><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
<ul class="left">
<li><a href="#">left</a></li>
</ul>
</section>
</nav>
</body>
</html>
