Question

根据我所研究的内容，似乎可以使用两个<nav>元素来处理具有二级菜单或子菜单的内容。这是可以理解的。

但是，对于桌面与移动设备的差异，使用两个具有相同链接的<nav>元素呢？它被认为是不好的做法，还是有任何不利（处罚）这样做？我知道这会违反＆＃34;干＆＃34;编码，但其他什么？

**背景 - 我正在考虑这种方法，因为我似乎无法将移动菜单（通过汉堡包按钮点击激活）转移到＆＃34;淡入淡出＆＃34;进出，如果浏览器因任何原因调整大小，仍然可以正常运行。我觉得调整大小的可能性不大，但在尝试使用＆＃34; visibility＆＃34;时会遇到错误。属性，或＆＃34;显示＆＃34;属性，或jQuery＆＃34;淡化＆＃34;和Javascript＆＃34;动画＆＃34;不重复<nav>元素，并且不使用另一个元素。旁注，我可以使用<nav>和任何＆＃34;幻灯片＆＃34;效果，它只是试图完成一个＆＃34;淡出＆＃34;效果。

Answer 1

根据我的经验，为了重新定位/视觉样式桌面/移动而复制元素几乎是不必要的。

相反，请保留导航容器一次，并使用两个版本的链接，或使用媒体查询重新定位/重新定位元素。

请记住，使用纯CSS来处理屏幕大小和响应更具有额外的好处，无需监听Window调整大小事件，从而使您的网站更快，更轻松地工作。

"abc 1" -> "abc 1"
"abc def 1" -> "abc def 1"
"abc-def 1" -> "abc-def 1"
"abc 1b" -> "abc 1"
"abc 11 b3" -> "abc 11"
"abc 11 3" -> "abc 11"
"abc 11b" -> "abc 11"

你提到尝试使汉堡包菜单起作用，我强烈建议使用工作正常的bootstrap navigation。（使用额外的淡入淡出HTML类可以轻松实现淡入淡出）

我在下面添加了一个显示引导汉堡包菜单的片段，但是用淡入淡出实现。

<nav>
<ul class="links">
  <li>
    <a href="#">link one</a>
  </li>
</ul>
<ul class="links mobile">
  <li>
    <a href="#">link one</a>
  </li>
</ul>
</nav>

Answer 2

通常，如果移动导航和全角导航所需的标记不同，或者导航标记需要位于不同的位置（使用第三方插件进行离屏导航是一个用例），我'我很乐意在我的页面上放置两组标记。除了这两种情况，我几乎总是试图重用我的标记。

两个<nav>元素 - 桌面与移动

2 个答案: