使用 Zurb Foundation 复制导航标记

Posted 2023-02-19

【中文标题】使用 Zurb Foundation 复制导航标记

【英文标题】：Duplicate navigation markup with Zurb Foundation

【发布时间】：2014-05-28 17:35:34

【问题描述】：

我正在一个正在建设的新公司网站中使用 Zurb Foundation 5。

我正在将 Off Canvas 菜单用于较小/触摸屏，并且还希望为较大的屏幕提供一些更“传统”的菜单 - 将鼠标悬停在主选项上并弹出更多内容的类型菜单选项。

我在ol 标签中定义了菜单，子菜单在嵌套ol 中。

这一切正常......但我的问题是这样做，我不得不复制标记。

我的结构定义如下：

<nav>
    <aside class="left-off-canvas-menu">
        <!-- Full menu markup here -->
    </aside>
    <a class="exit-off-canvas"></a>
</nav>

<nav id="mainNav" class="row show-for-large-up">
    <!-- Full menu markup also here -->
</nav>

我有以下顾虑

两次提供链接对 SEO 不利。这只是一个问题，我不知道这是否真的是一个问题。 我已经膨胀了源 - 向所有请求发送所有内容两次，并允许用户代理决定显示什么和隐藏什么。我特别尝试向手机发送尽可能少的标记。 维护。我使用的是 ASP.NET MVC，所以使用了部分视图，所以我只定义了一次结构并注入了两次；但如果我不使用它，那么维护我的菜单有两点 - 这似乎不是一个好习惯。

有什么想法吗？ 这是正确的吗？

【问题讨论】：

Foundation 的 Top-Bar 组件具有此功能。如果您打算使用该样式，您可能需要考虑使用它或将其用作自己修改画布外的指南。

【参考方案1】：

你必须添加

<nav class="left-off-canvas-menu hide-for-medium-up">
    <aside >
        <!-- Full menu markup here -->
    </aside>
    <a class="exit-off-canvas"></a>
</nav>

<nav id="mainNav" class="row show-for-large-up">
    <!-- Full menu markup also here -->
</nav>

或 class="left-off-canvas-menu hide-for-large-up" 你喜欢哪个 我认为应该这样做

【讨论】：

抱歉，您读过这个问题吗？这不是关于在这些不同情况下导航如何工作的问题，而是关于内容的重复，基础需要提供与框架相对应的两者。