Question

我有一个以Joomla为基础的响应式网站。

我正在使用幻灯片开/关画布导航，当页面低于768px时单击汉堡图标时会出现。

我的问题：我被告知谷歌不喜欢重复的菜单。目前隐藏着css display：none，直到页面达到786px宽度或更低。但是在768px宽度以上，可以在页面源中看到重复导航，如下所示（即使它有一个显示：没有分配给它：

<div id="sidebar">
    <ul>
        <li><a href="">link1</a></li>
        <li><a href="">link2</a></li>
        <li><a href="">link3</a></li>
    </ul>
</div>
<div id="page">
    <ul>
        <li><a href="">link1</a></li>
        <li><a href="">link2</a></li>
        <li><a href="">link3</a></li>
    </ul>
</div>

使用jQuery，是否可以完全删除，直到浏览器达到768px宽度或更低？

这是可行的吗？如何做？

Answer 1

jquery的

if ($('window').width() < 769){
   $('body').prepend('your menu here');
}

Answer 2

我不认为重复菜单对SEO来说是个大问题。如果从其他来源复制内容（即数据抓取），则重复内容通常是负面标记。如果你对它坚持不懈，那么我认为最好的选择是重新排列菜单，而不是删除和替换。
开始

<div id="sidebar">
<ul id="menu">
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
</ul>
</div>
<div id="page"></div>

然后，您将需要使用窗口宽度来设置断点，就像使用媒体查询一样。在您的768px断点处使用

$("#page").prepend("#menu");

这是使用JQuery（这是我所熟悉的），但prepend将完全将一组内容移动到另一个元素的第一个位置。

当然，你会想要反过来做相反的事情。现在，如果你想在人们改变窗户宽度以便改变你的设计时触发这个东西（或者如果你的断点恰好落在平板电脑的纵向/横向宽度上，你会发现更真实的场景）在窗口重新调整大小时触发此操作。

删除div，以便谷歌无法在768px以上看到它

2 个答案: