如何在Foundation中实现移动"top-bar“？
我正在尝试创建一个网站使用前面的框架基金会。我目前正在为这个网站的“顶部栏”菜单工作。我已经实现了桌面计算机的菜单；但是，我无法使菜单出现在宽度小于940px的窗口中。换句话说，菜单不会出现在移动设备和平板设备上。
我希望顶部栏的内容随着屏幕尺寸变小而堆叠。此外，我对基金会的理解是，它实现了必要的JavaScript来在幕后创建可折叠的菜单(这是正确的吗？)理想情况下，当按下菜单图标时，菜单也会变大或折叠。如何解决这个问题的建议？此外，如果我错过了基金会文档中与此相关的关键部分，我将不胜感激。
我的代码如下：
<!DOCTYPE html>
<html>
<head>
<!-- Foundation and my own CSS -->
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<link rel="stylesheet" type="text/css" href="css/foundation.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Foundation and jQuery -->
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
<?php if (isset($title)): ?>
<title>Joe Smith | <?= htmlspecialchars($title) ?></title>
<?php else: ?>
<title>Joe Smith</title>
<?php endif ?>
</head>
<body>
<script>
$(document).ready(function() {
$(document).foundation();
}
</script>
<nav class="top-bar">
<ul class="title-area">
<li class="name"><a href="index.php"><h1>Joe Smith</h1></a></li>
<!-- Mobile-only menu icon -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><i>Computer Scientist</i></li>
</ul>
<ul class="right">
<li class="active"><a href="about.php">ABOUT</a></li>
<li><a href="projects.php">PROJECTS</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="../files/resume.pdf">RESUME</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</section>
</nav>
</body>
</html>回答 3
Stack Overflow用户
发布于 2013-11-15 03:13:37
你的代码一定是这样的
<html>
<body>
.......
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html><sript>必须恰好在</body>之前
Stack Overflow用户
发布于 2014-01-20 07:02:28
请在您添加类top-bar的标签上添加data-topbar属性
下面是一个如何添加以下内容的示例：
<nav class="top-bar" data-topbar>Stack Overflow用户
发布于 2014-03-28 16:09:20
因此，使用Foundation实现导航栏依赖于以下几个约定。Foundation库在JavaScript元素中查找特定的数据属性，因此最佳实践是遵循如下所示的基本模板：
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
...
</section>
</nav>类为name的列表项用于在导航中显示站点的主标题。将文本从这个元素中去掉是很好的，但是要确保元素本身仍然存在，并且不要使用自结束标记(例如<li class="name" />)。
在小型设备中查看时，类为toggle-topbar menu-icon的下一个列表项是菜单的主标题或导航栏。确保该元素保持原样，并使用确保不会用白底文本颜色/背景覆盖样式。最后这一点很重要，因为我发现，当我以这样一种方式设置导航样式时，它实际上是正确呈现的，但具有相同的前景和背景颜色。
最后，正如@Shamim Hasan已经指出的，确保在导航元素的属性中声明了data-topbar。这就是Foundation在渲染菜单时所寻找的。
top-bar-section部件或多或少可以包含您想要的任何内容。
https://stackoverflow.com/questions/19756851
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号