根据要求提供响应式菜单

Question

我已经写了这个js所以菜单是响应的，但是当没有启用js时它不会中断。

我在他们自己的nav元素中有两个菜单列表。对于平板电脑和移动设备，我只需要一个菜单​​按钮（列表中的第一项），但在按下菜单按钮之前不显示列表。

目前第一个列表隐藏在打开页面但另一个列表永久显示。但是，单击任一菜单按钮都会显示第一个列表。导航都没有id或类。

为什么只有一个列表响应？

这是JS（它的头脑）

function showLists() {
$('.nav').show();
$(".menu").hide();
}
$(document).ready(function() {
if ($(window).width() < 450) {
    $('.nav').hide();
    $(".menu").click(function () {(
        showLists()
        )})
    }
});

Answer 1

听起来好像是在进行基本的切换导航。 RWD Patterns by Brad Frost是基本和更高级响应解决方案的一个很好的起点。

此外，您应该在大多数解决方案中都能够通过仅定义一个导航列表并使用CSS和JS来操纵它来响应行为。