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>
