html - 使用 Zurb Foundation 复制导航标记

Question

我正在构建的新公司网站中使用 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>

我有以下问题

1. 提供两次链接对 SEO 不利。这只是一个问题，我不知道这是否真的是个问题。
2. 我使源代码变得臃肿 - 将所有内容发送两次到所有请求并允许用户代理决定显示什么和隐藏什么。我特别尝试向手机发送尽可能少的标记。
3. 维护。我使用的是 ASP.NET MVC，所以使用了部分 View ，所以我实际上只定义了一次结构并注入(inject)了两次；但如果我没有使用它，那么有两点可以维护我的菜单 - 这似乎不是一个好的做法。

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

Answer 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" 你喜欢哪个 我认为应该这样做