Question

我试图设置一个带有粉底的网络应用，但我在导航栏工作正常方面遇到了一些麻烦。屏幕很大时工作正常。按钮全部显示在导航栏上。当我缩小屏幕时，按钮会按预期消失，并出现菜单按钮。不幸的是，菜单按钮不起作用。点击它没有任何效果。我页面中的脚本和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>

Answer 1

enter image description here

无法发布，因为代码会因为脚本代码而导致连接错误

基础导航栏菜单按钮未填充

1 个答案: