我刚开始使用基金会，坦率地说，自从我建立上一个网站以来已经有一段时间了。所以请耐心等待。
我现在处理菜单(顶部栏)的问题已经一天多了，但找不到问题出在哪里的线索。
问题是，我真的只需要一个基本菜单，它可以在小屏幕上切换到标准汉堡菜单，到目前为止还不错，它应该像文档中演示的那样工作，对吗？但不幸的是它没有，我不知道为什么。
我希望你能帮助我。我在下面添加没有内容的代码。该文件位于一个子目录中，这就是为什么所有目录引用都以 ../开头。
非常感谢! 伊娜
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inas | Ernährungs Coaching</title>
<link rel="stylesheet" href="../css/foundation.css" />
<link rel="stylesheet" href="../css/additionals.css" />
<script src="../js/vendor/modernizr.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="row">
<div class="large-12 columns clearfix">
<!-- a header -->
</div>
</div>
<br>
<div class="row">
<div class="small-12 columns">
<!-- Navigation -->
<div class="contain-to-grid sticky">
<nav class="top-bar data-topbar" >
<ul class="title-area" >
<li class="name">
<h1></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menü</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li><a href="index.php">Start</a></li>
<li class="divider"><li>
<li><a href="index.php?page=angebot">Angebot</a></li>
<li class="divider"><li>
<li><a href="index.php?page=aktuelles">Aktuelles</a></li>
<li class="divider"><li>
<li><a href="index.php?page=mich">Über Mich</a></li>
<li class="divider"><li>
<li><a href="index.php?page=kontakt">Kontakt</a></li>
</ul>
</section>
</nav>
</div><!-- /navigation -->
</div>
</div>
</div>
<div id="main">
<!-- some content -->
</div>
<div id="footer">
<!-- a footer -->
</div>
</div>
<script src="../js/vendor/jquery.js"></script>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
最佳答案
比较你的代码行:
<nav class="top-bar data-topbar" >
与基金会文档中的相应文档:
<nav class="top-bar" data-topbar role="navigation">
您的错误现在应该很明显了，并且会导致顶部栏无法正常运行。
其他建议:下次您想使用 Foundation 的预定义功能时，复制并粘贴代码，然后应用您的更改。看来你已经重写了它并且不小心认为“data-topbar”是一个类。
关于javascript - Zurb Foundation 顶栏在小屏幕上不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32423836/