如何利用 Zurb Foundation 网格制作菜单栏？答案

【问题标题】：How can I make advantage of Zurb Foundation grid to make menu bars?如何利用 Zurb Foundation 网格制作菜单栏？
【发布时间】：2014-12-02 22:10:05
【问题描述】：

使用网格布局，我们可以轻松编写 HTML（小中大）以在不同设备上以不同方式显示信息表。

但是，对于菜单栏，有时需要完全不同的布局。因此 HTML 必须编写两次，一次用于 Web，一次用于移动。我们将根据设备显示/隐藏。

我的问题是：这个显示/隐藏是否被认为是对响应式设计的破解？有没有更好的方法？

【问题讨论】：

标签： responsive-design grid zurb-foundation mobile-website

【解决方案1】：

Zurb 内置了响应式菜单，但如果您想要两个截然不同的菜单，有时最好复制一些代码并在适当的时候隐藏/显示它们。

这不是最干净的解决方案，但肯定会在任何地方发生。您只需要决定何时适合您。

【讨论】：

【解决方案2】：

如果您能想出一种方法来创建 html，并且仅使用 CSS 就可以轻松地将其重新设置为移动菜单，这是最简洁的方法。通常，所有移动菜单都需要某种切换/按钮来部署，因此您至少要在其中添加 JavaScript 或 jQuery。

内容的隐藏和显示（也通过媒体查询）并不是真正的 hack，而是在原型设计时更快的工作方式。

例如，我在原型设计时经常使用 Foundation Top-bar，然后使用基本 Foundation 组件创建自定义菜单，然后使用 responsive-nav 创建移动菜单，因为它没有 jQuery 依赖并且更轻量级.相比之下，很多网站使用 top-bar 和 offcanvas 元素，与仅使用网格、按钮、下拉菜单等相比，这两者在 CSS 和 JS 中都非常繁重。

正如 Ryan 所说，需要权衡取舍。您必须确定干净的语义标记对您和您的项目有多重要，并决定是否值得预先花费额外的时间和精力，从而为最终用户提供大致相同的体验。

【讨论】：

【解决方案3】：

对于我现在正在开发的 AngularJS 应用程序，我最近尝试使用 Foundation 5's Interchange 根据窗口宽度交换部分。不幸的是，它只是部分起作用。 Angular 做事的方式有些问题。不打算详细说明，但因为那不起作用，我搜索了不同的解决方案，例如

当然，如果您使用 Angular，这些都是解决您的问题的方法，这可能是将 Angular 添加到您的武器库的好举措。考虑 Foundation for Apps 的新发布，它是 Foundation，但针对 Web 应用程序创建者。它基于 Angular 和 ui-router。

如果您只是做一个简单的网站（产品、产品组合、博客），那么如果您真的想为移动和桌面菜单栏（导航条）。

【讨论】：

通常使用基于媒体查询的交换作为非 js 组件的伪部分是可以的，但我不确定基于 js 的基础组件在放置在外部文件中并以这种方式加载时是否正确运行。此外，您将在加载外部文件时受到额外的性能影响，而不是通过 CSS/媒体查询进行内联解释。
因此，在网站或应用程序中将导航栏编码到 index.html 中而不是作为视图部分调用会更好。除非应用程序状态发生变化并且必须显示新的导航 UI，否则这是有意义的。嗯，但现在我开始重新考虑根据状态隐藏和显示（通过 CSS）新/旧 UI 元素的想法。嗯。