菜单切换不会显示响应式导航栏

Question

我已经完成了我的研究，到目前为止，我已经尝试了几乎所有方法。我正在创建一个带有滑动推送菜单的响应式网站。我还在学习Java和jQuery，所以我最终严格通过CSS编码创建了它。为了做到这一点，我使用了：

  #menu-toggle:checked + .menu {
    position: absolute;
    left: 0;
        }

然后，我将 left 属性应用于我的.menu，值为 -240px。但是，当我单击菜单按钮时，导航栏拒绝显示。最重要的是，我的代码编辑器似乎无法识别'transition'属性。

这是我html和css文档的链接。这是学术作业。

我把responsive.css放在JavaScript垃圾箱里，所以没有错。

http://jsbin.com/gerunayapo/1/edit?html,css,js

Answer 1

你犯了一些错误，比如：

您可以在 jsbin 的脚本面板中添加 css。

然后你写错了这个 css：

#menu-toggle:checked + .menu {
    position: absolute;
    left: 0;
}

将其更改为：

#menuToggle:checked ~ .menu {
    position: absolute;
    left: 0;
}

menuToggle没有menu-toggle.并使用~而不是+.

检查 JS 垃圾箱链接